Apa itu clearfix?

Baru-baru ini saya melihat-lihat kode beberapa situs web, dan melihat bahwa setiap orang <div> memiliki kelas clearfix.

Setelah pencarian Google cepat, saya belajar bahwa itu untuk IE6 kadang-kadang, tetapi apa yang sebenarnya merupakan perbaikan jelas?

Bisakah Anda memberikan beberapa contoh tata letak dengan perbaikan yang jelas, dibandingkan dengan tata letak tanpa perbaikan yang jelas?

Jika Anda tidak perlu mendukung IE9 atau lebih rendah, Anda dapat menggunakan flexbox secara bebas, dan tidak perlu menggunakan tata letak melayang.

Perlu dicatat bahwa hari ini, penggunaan elemen melayang untuk tata letak semakin berkecil dengan penggunaan alternatif yang lebih baik.

• display: inline-block - Lebih baik
• Flexbox - Terbaik (tetapi dukungan browser terbatas)

Flexbox didukung dari Firefox 18, Chrome 21, Opera 12.10, dan Internet Explorer 10, Safari 6.1 (termasuk Mobile Safari) dan browser default Android 4.4.

Untuk daftar peramban terperinci, lihat: https://caniuse.com/flexbox .

(Mungkin begitu posisinya benar-benar ditetapkan, itu mungkin cara yang benar-benar direkomendasikan untuk meletakkan elemen.)

Clearfix adalah cara bagi suatu elemen untuk secara otomatis menghapus elemen turunannya , sehingga Anda tidak perlu menambahkan markup tambahan. Ini umumnya digunakan dalam tata letak apung di mana elemen melayang untuk ditumpuk secara horizontal.

Clearfix adalah cara untuk memerangi masalah kontainer ketinggian nol untuk elemen melayang

Perbaikan yang dilakukan sebagai berikut:

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

Atau, jika Anda tidak memerlukan dukungan IE <8, berikut ini juga baik-baik saja:

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

Biasanya Anda perlu melakukan sesuatu sebagai berikut:

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

Dengan clearfix, Anda hanya perlu yang berikut ini:

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

Baca tentang itu di artikel ini - oleh Chris Coyer @ CSS-Tricks

Jawaban lainnya benar. Tapi saya ingin menambahkan bahwa itu adalah peninggalan saat orang pertama kali belajar CSS, dan disalahgunakan floatuntuk melakukan semua tata letak mereka. floatdimaksudkan untuk melakukan hal-hal seperti gambar mengambang di sebelah teks yang berjalan lama, tetapi banyak orang menggunakannya sebagai mekanisme tata letak utama mereka. Karena itu tidak dimaksudkan untuk itu, Anda perlu peretasan seperti "clearfix" untuk membuatnya bekerja.

Hari-hari display: inline-blockini adalah alternatif yang solid ( kecuali untuk IE6 dan IE7 ), meskipun browser yang lebih modern datang dengan mekanisme tata letak yang bahkan lebih berguna di bawah nama-nama seperti flexbox, tata letak kotak, dll.

Ini clearfixmemungkinkan wadah untuk membungkus anak-anak yang melayang. Tanpa gaya clearfixatau setara, sebuah wadah tidak membungkus anak-anak melayang dan runtuh, sama seperti anak-anak melayang itu diposisikan secara mutlak.

Ada beberapa versi dari perbaikan yang jelas, dengan Nicolas Gallagher dan Thierry Koblentz sebagai penulis utama.

Jika Anda ingin dukungan untuk peramban yang lebih lama, yang terbaik adalah menggunakan clearfix ini:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Di SCSS, Anda dapat menggunakan teknik berikut:

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

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Jika Anda tidak peduli tentang dukungan browser lama, ada versi yang lebih pendek:

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

Untuk menawarkan pembaruan tentang situasi pada Q2 2017.

Properti tampilan CSS3 baru tersedia di Firefox 53, Chrome 58 dan Opera 45.

.clearfix {
   display: flow-root;
}

Periksa ketersediaan browser apa pun di sini: http://caniuse.com/#feat=flow-root

Elemen (dengan properti tampilan diatur ke flow-root) menghasilkan kotak kontainer blok, dan menjabarkan isinya menggunakan tata letak aliran. Itu selalu membuat konteks pemformatan blok baru untuk isinya.

Berarti bahwa jika Anda menggunakan div induk yang berisi satu atau beberapa anak mengambang, properti ini akan memastikan orangtua melampirkan semua anaknya. Tanpa perlu melakukan peretasan clearfix. Pada anak-anak, atau bahkan elemen dummy terakhir (jika Anda menggunakan varian clearfix dengan: sebelum pada anak-anak terakhir).

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

Sederhananya, clearfix adalah hack .

Ini adalah salah satu dari hal-hal buruk yang harus kita semua jalani karena ini adalah satu-satunya cara yang masuk akal untuk memastikan unsur-unsur anak yang melayang tidak membanjiri orang tua mereka. Ada skema tata letak lain di luar sana tetapi mengambang terlalu umum dalam desain / pengembangan web saat ini untuk mengabaikan nilai peretasan clearfix.

Saya pribadi bersandar ke solusi Micro Clearfix (Nicolas Gallagher)

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

referensi

Sebuah teknik yang biasa digunakan dalam tata letak berbasis float CSS adalah menetapkan beberapa properti CSS ke elemen yang Anda tahu akan mengandung elemen mengambang. Teknik, yang biasanya diimplementasikan menggunakan definisi kelas yang disebut clearfix, (biasanya) mengimplementasikan perilaku CSS berikut:

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

Tujuan dari perilaku gabungan ini adalah untuk membuat wadah :afterelemen aktif yang mengandung satu '.' ditandai sebagai tersembunyi yang akan menghapus semua pelampung yang sudah ada sebelumnya dan secara efektif mengatur ulang halaman untuk bagian konten berikutnya.

Opsi lain (dan mungkin paling sederhana) untuk mencapai clearfix adalah untuk digunakan overflow:hidden;pada elemen yang mengandung. Sebagai contoh

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

Tentu saja ini hanya dapat digunakan dalam kasus di mana Anda tidak pernah ingin kontennya meluap.

Saya mencoba jawaban yang diterima tetapi saya masih memiliki masalah dengan penyelarasan konten. Menambahkan pemilih ": sebelum" seperti yang ditunjukkan di bawah ini memperbaiki masalah:

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

KURANG di atas akan dikompilasi ke CSS di bawah ini:

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

Berikut adalah metode yang berbeda, hal yang sama tetapi sedikit berbeda

perbedaannya adalah titik konten yang diganti dengan \00A0==whitespace

Lebih lanjut tentang ini 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}

Ini adalah versi ringkasnya ...

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