clearfix คืออะไร

เมื่อเร็ว ๆ นี้ผมกำลังมองหารหัสผ่านของเว็บไซต์บางส่วนและเห็นว่าทุกคนมีชั้นเรียน<div> clearfix

หลังจากการค้นหาอย่างรวดเร็วของ Google ฉันได้เรียนรู้ว่ามันเป็นของ IE6 บางครั้ง แต่จริงๆแล้ว clearfix คืออะไร?

คุณช่วยให้ตัวอย่างบางส่วนของเลย์เอาต์มี clearfix เปรียบเทียบกับเลย์เอาต์ที่ไม่มี clearfix ได้หรือไม่?

หากคุณไม่ต้องการรองรับ IE9 หรือต่ำกว่าคุณสามารถใช้ flexbox ได้อย่างอิสระและไม่จำเป็นต้องใช้รูปแบบลอย

เป็นที่น่าสังเกตว่าในวันนี้การใช้องค์ประกอบที่ลอยอยู่สำหรับการจัดวางจะทำให้ท้อแท้มากขึ้นเรื่อย ๆ ด้วยการใช้ทางเลือกที่ดีกว่า

• display: inline-block - ดีกว่า
• Flexbox - ดีที่สุด (แต่รองรับเบราว์เซอร์ จำกัด )

Flexbox ได้รับการสนับสนุนจาก Firefox 18, Chrome 21, Opera 12.10 และ Internet Explorer 10, Safari 6.1 (รวมถึง Mobile Safari) และเบราว์เซอร์เริ่มต้นของ Android 4.4

สำหรับรายชื่อเบราว์เซอร์รายละเอียดโปรดดูที่: https://caniuse.com/flexbox

(บางทีเมื่อตำแหน่งของมันถูกสร้างขึ้นอย่างสมบูรณ์มันอาจเป็นวิธีที่แนะนำในการจัดองค์ประกอบ)

clearfix เป็นวิธีสำหรับองค์ประกอบในการล้างอิลิเมนต์ลูกโดยอัตโนมัติดังนั้นคุณไม่จำเป็นต้องเพิ่มมาร์กอัพเพิ่มเติม โดยทั่วไปจะใช้ในรูปแบบลอยที่องค์ประกอบลอยเป็นแบบเรียงซ้อนในแนวนอน

clearfix เป็นวิธีการต่อสู้กับปัญหาคอนเทนเนอร์ที่มีความสูงเป็นศูนย์สำหรับองค์ประกอบที่ลอย

clearfix ดำเนินการดังนี้:

.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>

อ่านเกี่ยวกับเรื่องนี้ในบทความนี้โดย Chris Coyer @ CSS-Tricks

คำตอบอื่น ๆ นั้นถูกต้อง แต่ฉันต้องการเพิ่มว่าเป็นสิ่งที่ระลึกถึงเวลาที่ผู้คนเรียนรู้ CSS เป็นครั้งแรกและใช้floatรูปแบบทั้งหมดของพวกเขาในทางที่ผิด floatมีวัตถุประสงค์เพื่อทำสิ่งต่าง ๆ เช่นภาพลอยถัดจากข้อความยาว ๆ แต่ผู้คนจำนวนมากใช้มันเป็นกลไกการจัดวางหลัก เนื่องจากมันไม่ได้มีไว้สำหรับการทำเช่นนั้นคุณต้องมีแฮ็กเช่น "clearfix" เพื่อให้มันทำงานได้

วันdisplay: inline-blockนี้เป็นทางเลือกที่มั่นคง ( ยกเว้น IE6 และ IE7 ) แม้ว่าเบราว์เซอร์ที่ทันสมัยกว่าจะมาพร้อมกับกลไกการจัดวางที่มีประโยชน์มากยิ่งขึ้นภายใต้ชื่อเช่น flexbox, การจัดวางตารางเป็นต้น

clearfixช่วยให้ภาชนะห่อเด็กลอยของมัน หากไม่มีสไตล์clearfixหรือที่เทียบเท่าภาชนะจะไม่พันรอบตัวเด็กที่ลอยอยู่และยุบตัวราวกับว่าเด็กกำลังลอยอยู่ในตำแหน่งอย่างแน่นอน

clearfix มีหลายเวอร์ชันโดยมีNicolas GallagherและThierry Koblentzเป็นผู้แต่งหลัก

หากคุณต้องการการสนับสนุนสำหรับเบราว์เซอร์รุ่นเก่าวิธีที่ดีที่สุดคือใช้ 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;
}

เพื่อเสนอการอัปเดตเกี่ยวกับสถานการณ์ในไตรมาสที่ 2 ปี 2560

คุณสมบัติการแสดงผล CSS3 ใหม่มีให้บริการใน Firefox 53, Chrome 58และ Opera 45

.clearfix {
   display: flow-root;
}

ตรวจสอบความพร้อมใช้งานของเบราว์เซอร์ใด ๆ ที่นี่: http://caniuse.com/#feat=flow-root

องค์ประกอบ (พร้อมคุณสมบัติการแสดงผลที่ตั้งค่าเป็นรูทโฟลว์) จะสร้างกล่องคอนเทนเนอร์ของบล็อกและวางเนื้อหาในโครงร่างการไหล มันจะสร้างบริบทการจัดรูปแบบบล็อกใหม่สำหรับเนื้อหาเสมอ

หมายความว่าถ้าคุณใช้ div parent ที่มีลูกลอยหนึ่งหรือหลายลูกคุณสมบัตินี้จะทำให้แน่ใจว่า parent ล้อมรอบลูกทุกลูก โดยไม่จำเป็นต้องแฮ็ก clearfix ใด ๆ สำหรับเด็ก ๆ หรือแม้แต่องค์ประกอบหุ่นตัวสุดท้าย (หากคุณใช้ตัวแปร clearfix กับ: ก่อนหน้ากับลูกสุดท้าย)

.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 คือแฮ็ค

มันเป็นหนึ่งในสิ่งที่น่าเกลียดที่เราทุกคนต้องอยู่ด้วยเพราะมันเป็นวิธีเดียวที่สมเหตุสมผลในการทำให้แน่ใจว่าองค์ประกอบของเด็กที่ลอยอยู่นั้นไม่ล้นพ่อแม่ของพวกเขา มีโครงร่างอื่น ๆ ออกไป แต่การลอยตัวเป็นเรื่องธรรมดาเกินไปในการออกแบบ / พัฒนาเว็บในปัจจุบันเพื่อเพิกเฉยต่อคุณค่าของการแฮ็ก clearfix

ฉันพึ่งพาตนเองไปยังโซลูชัน Micro Clearfix (Nicolas Gallagher)

.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ที่มีองค์ประกอบที่ใช้งานอยู่ซึ่งมี '' ทำเครื่องหมายว่าซ่อนอยู่ซึ่งจะล้างข้อมูลที่มีอยู่ล่วงหน้าทั้งหมดและรีเซ็ตหน้าสำหรับเนื้อหาชิ้นต่อไปได้อย่างมีประสิทธิภาพ

ตัวเลือกอื่น ๆ (และอาจจะง่ายที่สุด) สำหรับการได้รับ clearfix คือการใช้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}