Pertanyaan Metode ‘clearfix’ apa yang dapat saya gunakan?


Saya memiliki masalah kuno div membungkus tata letak dua kolom. Sidebar saya melayang, jadi wadah saya div gagal membungkus isi dan sidebar.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Sepertinya ada banyak metode untuk memperbaiki bug yang jelas di Firefox:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

Dalam situasi saya, satu-satunya yang tampaknya berfungsi dengan benar adalah <br clear="all"/> solusi, yang sedikit berantakan. overflow:auto memberi saya scrollbars yang jahat, dan overflow:hidden pasti memiliki efek samping. Juga, IE7 rupanya seharusnya tidak menderita masalah ini karena kelakuannya yang salah, tetapi dalam situasi saya itu menderita sama seperti Firefox.

Metode apa yang saat ini tersedia bagi kita adalah yang paling kuat?


809
2017-10-17 08:15


asal


Jawaban:


Tergantung pada desain yang diproduksi, masing-masing solusi CSS clearfix di bawah ini memiliki manfaat tersendiri.

Clearfix memang memiliki aplikasi yang berguna tetapi juga telah digunakan sebagai hack. Sebelum Anda menggunakan clearfix mungkin solusi css modern ini dapat bermanfaat:


Solusi Clearfix Modern


Wadah dengan overflow: auto;

Cara termudah untuk membersihkan elemen mengambang adalah menggunakan gaya overflow: auto pada elemen yang mengandung. Solusi ini berfungsi di setiap browser modern.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

Satu kelemahan, menggunakan kombinasi tertentu dari margin dan padding pada elemen eksternal dapat menyebabkan scrollbar muncul tetapi ini dapat diselesaikan dengan menempatkan margin dan padding pada elemen lain yang mengandung induk.

Menggunakan ‘overflow: hidden’ juga merupakan solusi perbaikan yang jelas, tetapi tidak akan memiliki scrollbars, namun menggunakan hidden akan memangkas konten apa pun yang ditempatkan di luar elemen yang mengandung.

catatan: Elemen mengambang adalah sebuah img tag dalam contoh ini, tetapi bisa berupa elemen html apa pun.


Clearfix Reloaded

Thierry Koblentz tentang CSSMojo menulis: Clearfix yang sangat baru dimuat ulang. Dia mencatat bahwa dengan menjatuhkan dukungan untuk oldIE, solusinya dapat disederhanakan menjadi satu pernyataan css. Selain itu, menggunakan display: block (dari pada display: table) memungkinkan margin untuk runtuh dengan benar ketika elemen dengan clearfix adalah saudara kandung.

.container::after {
  content: "";
  display: block;
  clear: both;
}

Ini adalah versi clearfix yang paling modern.


Solusi Clearfix yang lebih tua

Solusi di bawah ini tidak diperlukan untuk browser modern, tetapi mungkin berguna untuk menargetkan browser yang lebih lama.

Perhatikan bahwa solusi ini bergantung pada bug browser dan oleh karena itu harus digunakan hanya jika tidak ada solusi di atas yang berfungsi untuk Anda.

Mereka terdaftar secara kasar dalam urutan kronologis.


"Beat That ClearFix", perbaikan yang jelas untuk browser modern

Thierry Koblentz 'dari CSS Mojo telah menunjukkan bahwa ketika menargetkan browser modern, sekarang kita dapat menjatuhkan zoom dan ::before properti / nilai dan cukup gunakan:

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

Solusi ini tidak mendukung IE 6/7… dengan sengaja!

Thierry juga menawarkan: "Sebuah kata peringatan: jika Anda memulai proyek baru dari awal, lakukanlah, tetapi jangan menukar teknik ini dengan yang Anda miliki sekarang, karena meskipun Anda tidak mendukung oldIE, aturan Anda yang ada mencegah ambruknya margin. "


Clearfix Mikro

Solusi perbaikan terbaru yang diadopsi secara global dan terbaru, Clearfix Micro oleh Nicolas Gallagher.

Dukungan yang diketahui: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

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

Properti Melimpah

Metode dasar ini lebih disukai untuk kasus biasa, ketika konten yang diposisikan tidak akan ditampilkan di luar batas wadah.

http://www.quirksmode.org/css/clearing.html - menjelaskan cara menyelesaikan masalah umum yang terkait dengan teknik ini, yaitu pengaturan width: 100% di kontainer.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Daripada menggunakan display properti untuk mengatur "hasLayout" untuk IE, properti lain dapat digunakan untuk memicu "hasLayout" untuk elemen.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Cara lain untuk menghapus mengapung menggunakan overflow properti adalah menggunakan garis bawah hack. IE akan menerapkan nilai-nilai yang diawali dengan underscore, browser lain tidak. Itu zoom pemicu properti hasLayout di IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Meskipun ini berhasil ... tidak ideal untuk menggunakan peretasan.


PIE: Metode Kliring Mudah

Metode "Kliring Mudah" yang lebih lama ini memiliki keuntungan memungkinkan elemen yang diposisikan untuk menggantung di luar batas wadah, dengan mengorbankan CSS yang lebih rumit.

Solusi ini cukup lama, tetapi Anda dapat mempelajari semua tentang Kliring Mudah pada Posisi Adalah Segalanya: http://www.positioniseverything.net/easyclearing.html


Elemen menggunakan properti "jelas"

Solusi cepat dan kotor (dengan beberapa kekurangan) ketika Anda dengan cepat menampar sesuatu bersama-sama:

<br style="clear: both" /> <!-- So dirty! -->

Kelemahan

  • Ini tidak responsif dan dengan demikian mungkin tidak memberikan efek yang diinginkan jika gaya tata letak berubah berdasarkan permintaan media. Solusi dalam CSS murni lebih ideal.
  • Itu menambahkan markup html tanpa harus menambahkan nilai semantik.
  • Diperlukan definisi dan solusi inline untuk setiap instance daripada referensi kelas ke solusi tunggal dari "clearfix" di css dan referensi kelas ke dalam html.
  • Itu membuat kode sulit untuk bekerja dengan orang lain karena mereka mungkin harus menulis lebih banyak peretasan untuk mengatasinya.
  • Di masa depan ketika Anda perlu / ingin menggunakan solusi clearfix lain, Anda tidak perlu kembali dan menghapusnya <br style="clear: both" /> tag dikotori di sekitar markup.

1006
2017-10-27 19:37



Masalah apa yang ingin kita pecahkan?

Ada dua pertimbangan penting saat mengapung barang:

  1. Mengandung pelampung keturunan. Ini berarti bahwa elemen yang dipertanyakan membuatnya cukup tinggi untuk membungkus semua keturunan yang mengapung. (Mereka tidak digantung di luar.)

    Floating content hanging outside its container

  2. Isolasi turunan dari luar mengapung. Ini berarti bahwa keturunan dalam suatu unsur harus dapat digunakan clear: both dan memilikinya tidak berinteraksi dengan pelampung di luar elemen.

    <code>clear: both</code> interacting with a float elsewhere in the DOM

Blok konteks pemformatan

Hanya ada satu cara untuk melakukan keduanya. Dan itu adalah untuk membangun yang baru blok konteks pemformatan. Elemen yang membentuk konteks pemformatan blok adalah persegi panjang berinsulasi di mana pelampung berinteraksi satu sama lain. Konteks pemformatan blok akan selalu cukup tinggi untuk membungkus secara visual keturunannya yang mengambang, dan tidak ada pelampung di luar konteks pemformatan blok yang dapat berinteraksi dengan elemen di dalamnya. Insulasi dua arah ini tepat seperti yang Anda inginkan. Di IE, konsep yang sama ini disebut hasLayout, yang dapat diatur melalui zoom: 1.

Ada beberapa cara untuk menetapkan konteks pemformatan blok, tetapi solusi yang saya sarankan adalah display: inline-block dengan width: 100%. (Tentu saja, ada peringatan biasa dengan menggunakan width: 100%, jadi gunakan box-sizing: border-box atau dimasukkan padding, margin, dan border pada elemen yang berbeda.)

Solusi paling kuat

Mungkin aplikasi mengapung yang paling umum adalah tata letak dua kolom. (Dapat diperluas ke tiga kolom.)

Pertama struktur markup.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

Dan sekarang CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Cobalah sendiri

Pergi ke JS Bin untuk bermain-main dengan kode dan melihat bagaimana solusi ini dibangun dari bawah ke atas.

Metode clearfix tradisional dianggap berbahaya

Masalahnya dengan tradisional clearfix  solusi adalah bahwa mereka menggunakan dua konsep rendering yang berbeda untuk mencapai tujuan yang sama untuk IE dan orang lain. Di IE mereka menggunakan hasLayout untuk membuat konteks pemformatan blok baru, tetapi untuk semua orang mereka menggunakan kotak yang dihasilkan (:after) dengan clear: both, yang tidak menetapkan konteks pemformatan blok baru. Ini berarti hal-hal tidak akan berlaku sama dalam semua situasi. Untuk penjelasan mengapa ini buruk, lihat Semua yang Anda Ketahui tentang Clearfix adalah Salah.


67
2018-03-29 19:54



Standar baru, seperti yang digunakan oleh Inuit.css dan Minuman Alkohol Bourbon - dua kerangka CSS / Sass yang sangat banyak digunakan dan terawat dengan baik:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

Catatan

Perlu diingat bahwa clearfix pada dasarnya adalah hack untuk apa layout flexbox sekarang dapat menyediakan dalam cara yang jauh lebih pintar. Pengapungan CSS awalnya dirancang untuk konten sebaris mengalir di sekitar - seperti gambar dalam artikel tekstual panjang - dan bukan untuk tata letak kisi dan sejenisnya. Jika Anda browser target mendukung flexbox, itu layak untuk dilihat.

Ini tidak mendukung IE7. Kamu seharusnya tidak mendukung IE7. Melakukan hal tersebut terus mengekspos pengguna terhadap eksploitasi keamanan yang tidak diperbaiki dan membuat hidup lebih sulit bagi semua pengembang web lainnya, karena mengurangi tekanan pada pengguna dan organisasi untuk beralih ke browser modern.

Perbaikan ini jelas diumumkan dan dijelaskan oleh Thierry Koblentz pada bulan Juli 2012. Ini membuang berat yang tidak perlu dari Nicolas Gallagher's 2011 micro-clearfix. Dalam prosesnya, ia membebaskan elemen pseudo untuk Anda gunakan sendiri. Ini telah diperbarui untuk digunakan display: block daripada display: table (sekali lagi, kredit untuk Thierry Koblentz).


53
2018-04-19 07:28



Saya merekomendasikan menggunakan yang berikut, yang diambil dari http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

27
2017-09-27 15:16



Properti overflow dapat digunakan untuk menghapus float tanpa tambahan mark-up:

.container { overflow: hidden; }

Ini berfungsi untuk semua browser kecuali IE6, di mana semua yang perlu Anda lakukan adalah mengaktifkan hasLayout (zoom menjadi metode pilihan saya):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html


23
2018-02-10 11:20



Saya menemukan bug dalam Metode CLEARFIX resmi: DOT tidak memiliki ukuran font. Dan jika Anda mengatur height = 0 dan Elemen pertama di DOM-Tree Anda memiliki kelas "clearfix" Anda akan selalu memiliki margin di bagian bawah halaman 12px :)

Anda harus memperbaikinya seperti ini:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Sekarang bagian dari Layout-YAML ... Coba lihat saja - ini sangat menarik! http://www.yaml.de/en/home.html


17
2018-01-20 15:50



Ini solusi yang cukup rapi:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Ia dikenal bekerja di Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Termasuk: sebelum pemilih tidak perlu membersihkan pelampung,   tetapi ini mencegah margin-margin teratas runtuh di browser modern. Ini   memastikan bahwa ada konsistensi visual dengan IE 6/7 ketika zoom: 1 adalah   terapan.

Dari http://nicolasgallagher.com/micro-clearfix-hack/


15
2018-04-21 14:46



Clearfix dari bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

10
2017-12-05 07:12



Saya hanya menggunakan: -

.clear:after{
  clear: both;
  content: "";
  display: block;
}

Bekerja terbaik dan kompatibel dengan IE8 + :)


8
2018-02-21 13:03



Mengingat sejumlah besar balasan saya tidak akan memposting. Namun, metode ini dapat membantu seseorang, karena itu membantu saya.

Tetap jalan dari pelampung bila memungkinkan

Ini perlu disebutkan, saya menghindari pelampung seperti Ebola. Ada banyak alasan dan saya tidak sendirian; Baca jawaban Rikudo tentang apa yang dimaksud dengan clearfix dan Anda akan melihat apa yang saya maksud. Dengan kata-katanya sendiri: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives... 

Ada pilihan lain yang bagus (dan terkadang lebih baik) di luar sana selain pelampung. Seiring kemajuan teknologi dan peningkatan, flexbox (dan metode lainnya) akan diadopsi secara luas dan mengapung hanya akan menjadi ingatan yang buruk. Mungkin CSS4?


Kelakuan buruk mengambang dan gagal dihapus

Pertama, kadang-kadang, Anda mungkin berpikir bahwa Anda aman dari pelampung sampai penyelamat Anda ditusuk dan aliran html Anda mulai tenggelam:

Dalam codepen http://codepen.io/omarjuvera/pen/jEXBya di bawah ini, praktik membersihkan float dengan <div classs="clear"></div> (atau elemen lainnya) adalah umum tetapi tidak disukai dan anti semantik.

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Namun, tepat ketika Anda berpikir pelampung Anda berlayar layak ... boom! Ketika ukuran layar menjadi lebih kecil dan lebih kecil Anda melihat perilaku aneh seperti grafik di bawah ini (Sama http://codepen.io/omarjuvera/pen/jEXBya):

float bug sample 1

Kenapa kamu harus peduli? Saya tidak yakin dengan angka pasti, tetapi sekitar 80% (atau lebih) dari perangkat yang digunakan adalah perangkat seluler dengan layar kecil. Komputer desktop / laptop tidak lagi menjadi raja.


Itu tidak berakhir di sana

Ini bukan satu-satunya masalah dengan pelampung. Ada banyak, tetapi dalam contoh ini, beberapa orang mungkin mengatakan all you have to do is to place your floats in a container. Tetapi seperti yang Anda lihat di codepen dan grafis, bukan itu masalahnya. Itu tampaknya membuat hal-hal menjadi buruk:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Adapun hasilnya?

Itu sama! float bug sample 2

Setidaknya Anda tahu, Anda akan memulai pesta CSS, mengundang semua jenis pemilih dan properti ke pesta; membuat kekacauan yang lebih besar dari CSS Anda daripada apa yang Anda mulai dengan. Hanya untuk memperbaiki float Anda.


CSS Clearfix untuk menyelamatkan

Bagian CSS yang sederhana dan sangat mudah beradaptasi ini adalah keindahan dan "penyelamat":

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

Itu dia! Ini benar-benar bekerja tanpa memecah semantik dan saya menyebutkan berhasil?:

Dari sampel yang sama ...HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


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

Sekarang kita tidak lagi membutuhkan <div classs="clear"></div> <!-- Acts as a wall --> dan menjaga kerahasiaan semantik polisi. Ini bukan satu-satunya manfaat. Clearfix ini responsif terhadap ukuran layar apa pun tanpa menggunakan @mediadalam bentuknya yang paling sederhana. Dengan kata lain, itu akan menjaga wadah mengambang Anda dalam memeriksa dan mencegah banjir. Terakhir, ini menyediakan dukungan untuk browser lama semua dalam satu karate chop kecil =)

Inilah perbaikannya lagi

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

8
2018-03-19 23:22



Saya selalu mengapung bagian utama dari grid saya dan menerapkannya clear: both; ke footer. Itu tidak memerlukan div ekstra atau kelas.


7
2017-08-18 02:12