Pertanyaan Apa yang dimaksud dengan clearfix?


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

Setelah pencarian Google cepat, saya belajar bahwa itu untuk IE6 kadang-kadang, tapi apa sebenarnya adalah perbaikan?

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


867
2017-12-18 19:02


asal


Jawaban:


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

Perlu dicatat bahwa saat ini, penggunaan elemen mengambang untuk tata letak semakin berkurang dengan penggunaan alternatif yang lebih baik.

  • display: inline-block - Lebih baik
  • Flexbox - Dukungan browser terbaik (tapi 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: http://caniuse.com/flexbox.

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


Perbaikan yang jelas adalah cara untuk elemen otomatis menghapus elemen turunannya, sehingga Anda tidak perlu menambahkan markup tambahan. Ini biasanya digunakan di mengapung layout di mana elemen dilayang untuk ditumpuk secara horizontal.

Perbaikan yang jelas adalah cara untuk melawan masalah wadah nol-tinggi untuk elemen mengambang

Perbaikan yang jelas 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 baik-baik saja juga:

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

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


847
2017-12-18 19:04



Jika Anda belajar dengan memvisualisasikan, gambar ini mungkin membantu Anda memahami apa clearfix tidak.

enter image description here


413
2018-04-10 13:12



Jawaban lainnya benar. Tapi saya ingin menambahkan bahwa itu adalah peninggalan dari waktu ketika orang pertama kali belajar CSS, dan disalahgunakan float untuk melakukan semua tata letak mereka. float dimaksudkan untuk melakukan hal-hal seperti gambar mengambang di samping teks panjang berjalan, tetapi banyak orang menggunakannya sebagai mekanisme tata letak utama mereka. Karena itu tidak benar-benar dimaksudkan untuk itu, Anda perlu peretasan seperti "clearfix" untuk membuatnya berfungsi.

Hari-hari ini display: inline-block adalah alternatif yang kuat (kecuali untuk IE6 dan IE7), meskipun lebih banyak browser modern datang dengan mekanisme tata letak yang lebih bermanfaat dengan nama-nama seperti flexbox, tata letak grid, dll.


58
2017-12-18 19:08



Itu clearfix memungkinkan wadah untuk membungkus anak-anak yang dilayang itu. Tanpa sebuah clearfix atau gaya yang setara, sebuah wadah tidak membungkus anak-anak yang melayang dan runtuh, seolah-olah chldren melayang diposisikan secara mutlak.

Ada beberapa versi dari clearfix, dengan Nicolas Gallagher dan Thierry Koblentz sebagai penulis kunci.

Jika Anda ingin dukungan untuk browser yang lebih lama, sebaiknya gunakan clearfix ini:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Dalam SCSS, Anda harus menggunakan teknik berikut:

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

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

Jika Anda tidak peduli untuk mendukung peramban lama, ada versi yang lebih pendek:

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

31
2018-04-18 09:35



Untuk menawarkan pembaruan tentang situasi pada Q2 tahun 2017.

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

.clearfix {
   display: flow-root;
}

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

Elemen (dengan properti tampilan diatur ke flow-root) menghasilkan kotak penampung blok, dan memaparkan isinya menggunakan tata letak alur. Itu selalu menetapkan konteks pemformatan blok baru untuk isinya.

Berarti bahwa jika Anda menggunakan div orangtua yang mengandung satu atau beberapa anak mengambang, properti ini akan memastikan orang tua membungkus semua anak-anaknya. Tanpa perlu melakukan hack clearfix. Pada setiap anak, atau bahkan elemen boneka 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>


12
2018-04-20 21:02



Sederhananya, clearfix adalah peretasan.

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

Saya pribadi condong 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


10
2017-12-17 02:27



Teknik yang umum digunakan dalam tata letak berbasis float CSS adalah menetapkan beberapa properti CSS ke elemen yang Anda tahu akan berisi elemen mengambang. Teknik, yang umumnya 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 :after elemen aktif yang mengandung satu '.' ditandai sebagai tersembunyi yang akan menghapus semua float yang sudah ada sebelumnya dan secara efektif mengatur ulang halaman untuk bagian konten berikutnya.


4
2017-12-18 19:09



Pilihan lain (dan mungkin paling sederhana) untuk mencapai perbaikan yang jelas adalah menggunakan 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 contoh di mana Anda tidak ingin konten meluap.


2
2018-04-19 08:39



Saya mencoba jawaban yang diterima tetapi saya masih memiliki masalah dengan pelurusan 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;
}

1
2018-01-13 00:56



Berikut ini adalah metode yang berbeda tetapi sedikit berbeda

perbedaannya adalah dot 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 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}

0
2017-09-20 09:17



Clearfix digunakan untuk membersihkan pelampung ekstra. Ini adalah kelas yang ditambahkan dalam elemen induk.

Kode clearfix saya ada di sini ...

/* clearfix*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Meskipun disalin tetapi akan membantu. Sini :before dan :after digunakan untuk menunjukkan titik awal & akhir elemen itu. Sedangkan clear:both tidak akan mengizinkan elemen mengambang lainnya di sisi kanan atau kiri dari elemen tertentu yang mengandung kelas itu.


-1
2017-07-24 17:11