පැහැදිලි කිරීමක් යනු කුමක්ද?

මෑතකදී මම කිසියම් වෙබ් අඩවියක කේතයක් දෙස බැලූ අතර සෑම කෙනෙකුටම <div> පන්තියක් ඇති බව දුටුවෙමි clearfix.

ඉක්මන් ගූගල් සෙවුමකින් පසුව, එය සමහර විට IE6 සඳහා බව මම දැන ගතිමි, නමුත් ඇත්ත වශයෙන්ම පැහැදිලි විසඳුමක් යනු කුමක්ද?

පැහැදිලි සැකැස්මක් නොමැතිව පිරිසැලසුමක් සමඟ සසඳන විට පැහැදිලි සැකැස්මක් සහිත පිරිසැලසුමක් සඳහා උදාහරණ කිහිපයක් ඔබට ලබා දිය හැකිද?

ඔබට IE9 හෝ ඊට අඩු සහය දැක්වීමට අවශ්‍ය නොවන්නේ නම්, ඔබට නම්‍යශීලී කොටුව නිදහසේ භාවිතා කළ හැකි අතර පාවෙන පිරිසැලසුම් භාවිතා කිරීමට අවශ්‍ය නොවේ.

අද වන විට, පිරිසැලසුම සඳහා පාවෙන මූලද්‍රව්‍ය භාවිතය වඩා හොඳ විකල්ප භාවිතා කිරීම සමඟ වැඩි වැඩියෙන් අධෛර්යමත් වෙමින් පවතින බව සඳහන් කිරීම වටී.

• display: inline-block - වඩා හොඳ
• Flexbox - හොඳම (නමුත් සීමිත බ්‍රව්සර සහාය)

ෆ්ලෙක්ස්බොක්ස් ෆයර්ෆොක්ස් 18, ක්‍රෝම් 21, ඔපෙරා 12.10, සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10, සෆාරි 6.1 (ජංගම සෆාරි ඇතුළුව) සහ ඇන්ඩ්‍රොයිඩ් හි පෙරනිමි බ්‍රව්සරය 4.4 වෙතින් සහය දක්වයි.

සවිස්තරාත්මක බ්‍රව්සර් ලැයිස්තුවක් සඳහා බලන්න: https://caniuse.com/flexbox .

(සමහර විට එහි පිහිටීම මුළුමනින්ම තහවුරු වූ පසු, එය මූලද්‍රව්‍ය තැබීම සඳහා නිර්දේශිත ක්‍රමය විය හැකිය.)

ක්ලියර්ෆික්ස් යනු මූලද්‍රව්‍යයක් එහි ළමා අංග ස්වයංක්‍රීයව ඉවත් කිරීමට ක්‍රමයක් වන අතර එමඟින් ඔබට අමතර සලකුණු එකතු කිරීමට අවශ්‍ය නොවේ. එය සාමාන්‍යයෙන් පාවෙන පිරිසැලසුම් වල භාවිතා වන අතර මූලද්‍රව්‍ය තිරස් අතට ගොඩගැසීමට පාවී ඇත.

ක්ලියර්ෆික්ස් යනු පාවෙන මූලද්‍රව්‍ය සඳහා ශුන්‍ය උස බහාලුම් ගැටළුවට එරෙහිව සටන් කිරීමේ ක්‍රමයකි

පැහැදිලි කිරීමක් පහත පරිදි සිදු කරයි:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

නැතහොත්, ඔබට IE <8 සහය අවශ්‍ය නොවේ නම්, පහත සඳහන් දෑ ද හොඳයි:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

සාමාන්‍යයෙන් ඔබට පහත පරිදි යමක් කිරීමට අවශ්‍ය වනු ඇත:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

Clearfix සමඟ, ඔබට අවශ්‍ය වන්නේ පහත සඳහන් දේ පමණි:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

මෙම ලිපියෙන් ඒ ගැන කියවන්න - ක්‍රිස් කෝයර් @ CSS-Tricks

අනෙක් පිළිතුරු නිවැරදි ය. නමුත් එය එකතු කිරීමට අවශ්‍ය වන්නේ මිනිසුන් ප්‍රථම වරට CSS ඉගෙන ගත් කාල වකවානුවකි float. floatදිගු පෙළ පෙළ අසල පාවෙන රූප වැනි දේවල් කිරීමට අදහස් කරන නමුත් බොහෝ දෙනෙක් එය ඔවුන්ගේ මූලික පිරිසැලසුම් යාන්ත්‍රණය ලෙස භාවිතා කළහ. එය සැබවින්ම ඒ සඳහා අදහස් නොකෙරුණු බැවින්, එය ක්‍රියාත්මක කිරීමට ඔබට “ක්ලියර්ෆික්ස්” වැනි හක්ක අවශ්‍ය වේ.

ෆ්ලෙක්ස්බොක්ස්, ග්‍රිඩ් පිරිසැලසුම වැනි නම් යටතේ වඩාත් නවීන බ්‍රව්සර් ඊටත් වඩා ප්‍රයෝජනවත් පිරිසැලසුම් යාන්ත්‍රණ සමඟ එන නමුත් මේ දිනවල display: inline-blockශක්තිමත් විකල්පයකි ( IE6 සහ IE7 හැර ).

මෙම clearfixකන්ටේනර් එහි ඉඩ හැරි දරුවන් ආවරණය කරනවා කිරීමට ඉඩ දෙයි. clearfixසමාන හෝ සමාන මෝස්තරයකින් තොරව , කන්ටේනරයක් එහි පාවෙන දරුවන් වටා එතෙන්නේ නැති අතර කඩා වැටෙන්නේ එහි පාවෙන දරුවන් නිරපේක්ෂව ස්ථානගත කර ඇති ආකාරයට ය.

ක්ලියර්ෆික්ස් හි අනුවාද කිහිපයක් ඇත, ප්‍රධාන කතුවරුන් ලෙස නිකොලස් ගැලගර් සහ තියරි කොබ්ලෙන්ට්ස් සිටී.

ඔබට පැරණි බ්‍රව්සර් සඳහා සහය අවශ්‍ය නම්, මෙම පැහැදිලි කිරීම භාවිතා කිරීම වඩාත් සුදුසුය:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SCSS හි, ඔබට පහත තාක්ෂණය භාවිතා කළ හැකිය:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

පැරණි බ්‍රව්සර් සඳහා සහය දැක්වීම ගැන ඔබ තැකීමක් නොකරන්නේ නම්, කෙටි අනුවාදයක් ඇත:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

2017 දෙවන කාර්තුවේ තත්වය පිළිබඳ යාවත්කාලීන කිරීමක් ඉදිරිපත් කිරීම.

නව CSS3 දර්ශන දේපලක් ෆයර්ෆොක්ස් 53, ක්‍රෝම් 58 සහ ඔපෙරා 45 වෙතින් ලබා ගත හැකිය .

.clearfix {
   display: flow-root;
}

ඕනෑම බ්‍රව්සරයක් සඳහා ඇති හැකියාව මෙහි පරීක්ෂා කරන්න: http://caniuse.com/#feat=flow-root

මූලද්‍රව්‍යය (ප්‍රදර්ශන දේපල ප්‍රවාහ-මූලයට සකසා ඇති) බ්ලොක් බහාලුම් පෙට්ටියක් ජනනය කරන අතර ප්‍රවාහ පිරිසැලසුම භාවිතයෙන් එහි අන්තර්ගතය දක්වයි. එය සෑම විටම එහි අන්තර්ගතය සඳහා නව වාරණ ආකෘතිකරණ සන්දර්භයක් ස්ථාපිත කරයි.

මෙයින් අදහස් කරන්නේ ඔබ පාවෙන දරුවන් එකක් හෝ කිහිපයක් අඩංගු දෙමාපිය කොට් use ාශයක් භාවිතා කරන්නේ නම්, මෙම දේපල මඟින් දෙමව්පියන් සියළුම දරුවන් සිටින බව සහතික කරනු ඇත. පැහැදිලි විසඳුමක් අවශ්‍ය නොවේ. ඕනෑම දරුවෙකු මත හෝ අන්තිම ව්‍යාජ අංගයක් (ඔබ ක්ලියර්ෆික්ස් ප්‍රභේදය සමඟ භාවිතා කළේ නම්: පෙර දරුවන්ට පෙර).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

සරලව කිවහොත්, clearfix යනු අනවසරයකි .

පාවෙන ළමා අංග ඔවුන්ගේ දෙමව්පියන් පිටාර ගැලීම සහතික කිරීම සඳහා ඇති එකම සාධාරණ ක්‍රමය එය බැවින් අප සැවොම ජීවත් විය යුතු අවලස්සන දේවලින් එකකි. වෙනත් පිරිසැලසුම් යෝජනා ක්‍රම එහි ඇත, නමුත් පැහැදිලි සැකසුම් හැක් වල වටිනාකම නොසලකා හැරීම සඳහා පාවීම අද වෙබ් නිර්මාණ / සංවර්ධනයේ බහුලව දක්නට ලැබේ.

මම පෞද්ගලිකව මයික්‍රෝ ක්ලියර්ෆික්ස් විසඳුම (නිකොලස් ගැලගර්) වෙත නැඹුරු වෙමි

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

යොමුව

CSS පාවෙන පාදක පිරිසැලසුම් වල බහුලව භාවිතා වන තාක්‍ෂණය නම් පාවෙන මූලද්‍රව්‍ය අඩංගු බව ඔබ දන්නා මූලද්‍රව්‍යයකට CSS ගුණාංග අතලොස්සක් පැවරීමයි. පංති අර්ථ දැක්වීමක් භාවිතා කරමින් බහුලව ක්‍රියාත්මක වන තාක්‍ෂණය clearfix(සාමාන්‍යයෙන්) පහත දැක්වෙන CSS හැසිරීම් ක්‍රියාත්මක කරයි:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

මෙම ඒකාබද්ධ හැසිරීම් වල පරමාර්ථය වන්නේ :afterතනි 'අඩංගු ක්‍රියාකාරී අංගයක් සහිත බහාලුමක් නිර්මාණය කිරීමයි . සැඟවුණු ලෙස සලකුණු කර ඇති අතර එමඟින් පෙර පැවති සියලු පාවෙන දේ ඉවත් කර ඊළඟ අන්තර්ගතය සඳහා පිටුව effectively ලදායී ලෙස යළි පිහිටුවනු ඇත.

පැහැදිලි විසඳුමක් ලබා ගැනීම සඳහා අනෙක් (හා සමහර විට සරලම) විකල්පය වන්නේ overflow:hidden;අඩංගු මූලද්‍රව්‍යය භාවිතා කිරීමයි. උදාහරණයක් වශයෙන්

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

ඇත්ත වශයෙන්ම මෙය භාවිතා කළ හැක්කේ ඔබ කිසි විටෙකත් අන්තර්ගතය පිරී ඉතිරී යනු ඇතැයි අපේක්ෂා නොකරන අවස්ථාවන්හිදී පමණි.

මම පිළිගත් පිළිතුර අත්හදා බැලුවද අන්තර්ගත පෙළගැස්වීම පිළිබඳ මට තවමත් ගැටලුවක් තිබේ. පහත දැක්වෙන පරිදි ": පෙර" තේරීම් කාරකයක් එක් කිරීම ගැටළුව නිරාකරණය කර ඇත:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

ඉහත අඩුවෙන් පහත CSS සමඟ සම්පාදනය වේ:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

මෙන්න වෙනස් ක්‍රමයක් එකම දෙයක් නමුත් ටිකක් වෙනස්

වෙනස වන්නේ \00A0== සමඟ ප්‍රතිස්ථාපනය වන අන්තර්ගත තිතයිwhitespace

මේ පිළිබඳ වැඩි විස්තර http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

මෙන්න එහි සංයුක්ත අනුවාදය ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}