Saya memiliki masalah kuno divpembungkus tata letak dua kolom. Bilah sisi saya melayang, jadi wadah saya divgagal membungkus konten dan bilah sisi.

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

Tampaknya 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"/>solusinya, yang sedikit berantakan. overflow:automemberi saya scrollbar jahat, dan overflow:hiddenpasti memiliki efek samping. IE7 juga seharusnya tidak menderita masalah ini karena perilakunya yang salah, tetapi dalam situasi saya ini sama dengan Firefox.

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

Bergantung pada desain yang diproduksi, masing-masing solusi CSS clearfix di bawah ini memiliki manfaatnya sendiri.

Clearfix memang memiliki aplikasi yang bermanfaat tetapi juga telah digunakan sebagai peretasan. Sebelum Anda menggunakan perbaikan yang jelas mungkin solusi css modern ini dapat bermanfaat:

• css flexbox
• kotak css

Solusi Clearfix Modern

Wadah dengan overflow: auto;

Cara paling sederhana untuk menghapus elemen melayang adalah menggunakan gaya overflow: autopada 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 margin dan bantalan tertentu pada elemen eksternal dapat menyebabkan bilah gulir muncul tetapi ini dapat diselesaikan dengan menempatkan margin dan bantalan pada elemen induk yang mengandung lainnya.

Menggunakan 'overflow: hidden' juga merupakan solusi perbaikan yang jelas, tetapi tidak akan memiliki scrollbar, namun menggunakan hidden akan memotong konten yang diposisikan di luar elemen yang mengandung.

Catatan: Elemen apung adalah imgtag dalam contoh ini, tetapi bisa berupa elemen html apa pun.

Clearfix Reloaded

Thierry Koblentz di CSSMojo menulis: Clearfix terbaru dimuat ulang . Dia mencatat bahwa dengan menjatuhkan dukungan untuk oldIE, solusinya dapat disederhanakan menjadi satu pernyataan css. Selain itu, menggunakan display: block(bukan display: table) memungkinkan margin untuk runtuh dengan benar ketika elemen dengan clearfix bersaudara.

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

Ini adalah versi clearfix paling modern.

⋮

⋮

Solusi Clearfix Lama

Solusi di bawah ini tidak diperlukan untuk peramban modern, tetapi mungkin bermanfaat untuk menargetkan peramban lama.

Perhatikan bahwa solusi ini bergantung pada bug browser dan karenanya hanya boleh digunakan jika tidak ada solusi di atas yang berfungsi untuk Anda.

Mereka terdaftar kira-kira dalam urutan kronologis.

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

Thierry Koblentz dari CSS Mojo telah menunjukkan bahwa ketika menargetkan browser modern, kita sekarang dapat menghapus zoomdan ::beforeproperti / nilai dan hanya menggunakan:

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

Solusi ini tidak mendukung untuk IE 6/7 ... sengaja!

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

Micro Clearfix

Solusi clearfix terbaru dan diadopsi secara global, the Micro Clearfix oleh Nicolas Gallagher .

Dukungan yang dikenal: 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 mengatasi masalah umum yang terkait dengan teknik ini, yaitu pengaturan width: 100%pada wadah.

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

Daripada menggunakan displayproperti untuk menetapkan "hasLayout" untuk IE, properti lain dapat digunakan untuk memicu "hasLayout" untuk suatu elemen .

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

Cara lain untuk menghapus float menggunakan overflowproperti adalah dengan menggunakan underscore hack . IE akan menerapkan nilai yang diawali dengan garis bawah, browser lain tidak. The zoomproperti memicu hasLayout di IE:

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

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

PIE: Metode Kliring Mudah

Metode "Kliring Mudah" yang lebih tua 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 Is Everything: http://www.positioniseverything.net/easyclearing.html

Elemen menggunakan properti "jelas"

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

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

Kekurangannya

• Ini tidak responsif dan karenanya 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.
• Itu membutuhkan definisi inline dan solusi untuk setiap instance daripada referensi kelas untuk solusi tunggal dari "clearfix" di css dan referensi kelas untuk itu di html.
• Itu membuat kode sulit untuk bekerja dengan orang lain karena mereka mungkin harus menulis lebih banyak peretasan untuk mengatasinya.
• Di masa mendatang ketika Anda perlu / ingin menggunakan solusi clearfix lain, Anda tidak perlu kembali dan menghapus setiap <br style="clear: both" />tag yang berserakan di sekitar markup.

Masalah apa yang kita coba selesaikan?

Ada dua pertimbangan penting saat mengapung:

1. Mengandung pelampung keturunan. Ini berarti bahwa elemen yang dimaksud membuat dirinya cukup tinggi untuk membungkus semua keturunan yang mengambang. (Mereka tidak nongkrong di luar.)

   

2. Keturunan isolasi dari mengapung luar. Ini berarti bahwa keturunan di dalam suatu elemen harus dapat menggunakan clear: bothdan membuatnya tidak berinteraksi dengan pelampung di luar elemen.

   

Blokir konteks pemformatan

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

Ada beberapa cara untuk membangun konteks pemformatan blok, tetapi solusi yang saya sarankan adalah display: inline-blockdengan width: 100%. (Tentu saja, ada peringatan biasa dengan menggunakan width: 100%, sehingga penggunaan box-sizing: border-boxatau put padding, margindanborder pada elemen yang berbeda.)

Solusi paling kuat

Mungkin aplikasi float yang paling umum adalah tata letak dua kolom. (Dapat diperpanjang hingga 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 Bin JS untuk bermain-main dengan kode dan melihat bagaimana solusi ini dibangun dari bawah ke atas.

Metode clearfix tradisional dianggap berbahaya

Masalah dengan solusi clearfix tradisional adalah bahwa mereka menggunakan dua konsep rendering berbeda untuk mencapai tujuan yang sama untuk IE dan orang lain. Di IE mereka menggunakan hasLayout untuk membangun konteks pemformatan blok baru, tetapi untuk semua orang mereka menggunakan kotak yang dihasilkan ( ) dengan , yang tidak membangun konteks pemformatan blok baru. Ini berarti segala sesuatu tidak akan berlaku sama dalam semua situasi. Untuk penjelasan mengapa ini buruk, lihat Semua yang Anda Ketahui tentang Clearfix salah .:afterclear: both

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

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

Catatan

Perlu diingat bahwa clearfix pada dasarnya adalah peretasan untuk tata letak flexbox yang sekarang dapat menyediakan dengan cara yang jauh lebih cerdas . CSS float pada awalnya dirancang untuk konten inline mengalir - seperti gambar dalam artikel tekstual yang panjang - dan bukan untuk tata letak kotak dan sejenisnya. Jika browser target Anda mendukung flexbox , ada baiknya melihat.

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

Clearfix ini diumumkan dan dijelaskan oleh Thierry Koblentz pada bulan Juli 2012. Ini menghilangkan bobot yang tidak perlu dari mikro-clearfix 2011 milik Nicolas Gallagher . Dalam prosesnya, ia membebaskan elemen pseudo untuk Anda gunakan sendiri. Ini telah diperbarui untuk digunakan display: blockdaripada display: table(sekali lagi, kredit ke Thierry Koblentz).

Saya sarankan menggunakan yang berikut ini, 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;  
}

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

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

Saya telah menemukan bug di CLEARFIX-Method resmi: DOT tidak memiliki ukuran font. Dan jika Anda mengatur height = 0dan 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;
}

Ini sekarang bagian dari Tata Letak YAML ... Lihat saja - sangat menarik! http://www.yaml.de/en/home.html

Ini adalah 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;
}

Ini dikenal berfungsi di Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Termasuk: sebelum pemilih tidak perlu menghapus float, tetapi mencegah margin atas dari runtuh di browser modern. Ini memastikan bahwa ada konsistensi visual dengan IE 6/7 ketika zoom: 1 diterapkan.

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

Hapus perbaikan dari bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

Saya hanya menggunakan: -

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

Bekerja paling baik dan kompatibel dengan IE8 + :)

Mengingat besarnya jumlah balasan, saya tidak akan memposting. Namun, metode ini dapat membantu seseorang, karena memang membantu saya.

Tinggal jauh dari mengapung jika memungkinkan

Perlu disebutkan, saya menghindari mengapung seperti Ebola. Ada banyak alasan dan saya tidak sendirian; Baca jawaban Rikudo tentang apa itu 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 baik (dan kadang-kadang lebih baik) di luar sana selain mengapung. Seiring kemajuan teknologi dan peningkatan, flexbox (dan metode lainnya) akan diadopsi secara luas dan float hanya akan menjadi memori yang buruk. Mungkin sebuah CSS4?

Kesalahan perilaku mengambang dan gagal dihapus

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

Dalam codepen http://codepen.io/omarjuvera/pen/jEXBya bawah ini, praktik membersihkan float dengan <div classs="clear"></div>(atau elemen lain) adalah umum tetapi 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 layak berlayar ... booming! Ketika ukuran layar menjadi lebih kecil dan lebih kecil Anda melihat perilaku aneh seperti gambar di bawah ini (Sama http://codepen.io/omarjuvera/pen/jEXBya ):

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 / laptop desktop bukan lagi raja.

Itu tidak berakhir di sana

Ini bukan satu-satunya masalah dengan mengapung. Ada banyak, tetapi dalam contoh ini, beberapa orang mungkin berkata all you have to do is to place your floats in a container. Tapi seperti yang Anda lihat di codepen dan grafik, itu tidak terjadi. Tampaknya membuat segalanya menjadi lebih 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;
}

Bagaimana hasilnya?

Itu sama!

Setidaknya Anda tahu, Anda akan memulai pesta CSS, mengundang semua jenis penyeleksi dan properti ke pesta; membuat kekacauan CSS Anda lebih besar dari yang Anda mulai. Hanya untuk memperbaiki kendaraan Anda.

CSS Clearfix untuk penyelamatan

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

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

Itu dia! Ini benar-benar berfungsi tanpa melanggar semantik dan apakah saya menyebutkan itu 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 perlu lagi <div classs="clear"></div> <!-- Acts as a wall --> dan membuat polisi semantik bahagia. Ini bukan satu-satunya manfaat. Clearfix ini responsif terhadap ukuran layar apa pun tanpa menggunakan @mediabentuk paling sederhana. Dengan kata lain, itu akan menjaga wadah mengapung Anda di cek dan mencegah banjir. Terakhir, ia menyediakan dukungan untuk browser lama semuanya dalam satu karate chop kecil =)

Inilah perbaikan yang jelas lagi

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

Saya selalu mengapung bagian utama dari kisi saya dan melamar clear: both;ke footer. Itu tidak memerlukan div atau kelas tambahan.

secara jujur; semua solusi tampaknya merupakan peretasan untuk memperbaiki bug rendering ... apakah saya salah?

Saya telah menemukan <br clear="all" />yang paling mudah, paling sederhana. melihat di class="clearfix"mana - mana tidak dapat membuat orang sensibilitas yang keberatan dengan elemen markup asing, kan? Anda hanya melukis masalah di kanvas yang berbeda.

saya juga menggunakan display: hiddensolusi, yang hebat dan tidak memerlukan deklarasi kelas tambahan atau markup html ... tapi kadang-kadang Anda membutuhkan elemen untuk meluap wadah, misalnya. pita dan ikat pinggang yang cantik

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

Saya telah mencoba semua solusi ini, margin besar akan ditambahkan ke <html>elemen secara otomatis ketika saya menggunakan kode di bawah ini:

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

Akhirnya, saya memecahkan masalah margin dengan menambahkan font-size: 0;CSS di atas.

Dengan SASS, clearfix adalah:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

dan digunakan seperti:

.container {
    @include clearfix;
}

jika Anda menginginkan clearfix baru:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

Dengan KURANG ( http://lesscss.org/ ), seseorang dapat membuat helper clearfix berguna:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

Dan kemudian menggunakannya dengan wadah yang bermasalah, misalnya:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Menggunakan overflow:hidden/auto dan tinggi untuk ie6 akan cukup jika wadah mengambang memiliki elemen induk.

Salah satu dari #test dapat berfungsi, untuk HTML yang dinyatakan di bawah ini untuk menghapus float.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

Dalam kasus ketika ini menolak untuk bekerja dengan ie6, hanya float induknya untuk menghapus float.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Belum pernah benar-benar membutuhkan jenis kliring lain. Mungkin itu cara saya menulis HTML.

Nilai tampilan baru tampaknya berfungsi dalam satu baris.

display: flow-root;

Dari spec W3: "Elemen menghasilkan kotak kontainer blok, dan menjabarkan isinya menggunakan tata letak aliran. Itu selalu membuat konteks format blok baru untuk isinya."

Informasi: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Seperti yang ditunjukkan pada tautan di atas, dukungan saat ini terbatas sehingga dukungan mundur seperti di bawah ini dapat digunakan: https://github.com/fliptheweb/postcss-flow-root

Saya akan mengapung #contentjuga, dengan cara itu kedua kolom berisi mengapung. Juga karena itu akan memungkinkan Anda untuk membersihkan elemen di dalamnya#content tanpa membersihkan bilah samping.

Hal yang sama dengan pembungkus, Anda harus menjadikannya konteks pemformatan blok untuk membungkus kedua kolom.

Artikel ini menyebutkan beberapa pemicu yang dapat Anda gunakan: blok konteks pemformatan .

Clearfix adalah cara elemen menghapus secara otomatis setelahnya, sehingga Anda tidak perlu menambahkan markup tambahan.

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

Biasanya Anda perlu melakukan sesuatu sebagai berikut:

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

Dengan clearfix, Anda hanya perlu

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

Mengapa hanya mencoba menggunakan hack css untuk melakukan apa yang dilakukan 1 baris HTML. Dan mengapa tidak menggunakan html semantik tu put break untuk kembali ke garis?

Untuk saya benar-benar lebih baik untuk digunakan:

<br style="clear:both" />

Dan jika Anda tidak ingin gaya apapun dalam html Anda, Anda hanya perlu menggunakan kelas untuk istirahat Anda dan masukkan ke .clear { clear:both; }dalam CSS Anda.

Keuntungan dari ini:

• Penggunaan html semantik untuk kembali ke baris
• Jika tidak ada CSS, itu akan berfungsi
• Tidak perlu kode CSS dan Hack tambahan
• tidak perlu mensimulasikan br dengan CSS, itu sudah ada dalam HTML

Dengan asumsi Anda menggunakan struktur HTML ini:

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

Inilah CSS yang akan saya gunakan:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

Saya menggunakan set ini sepanjang waktu dan berfungsi dengan baik untuk saya, bahkan di IE6.

Tidak seperti perbaikan-perbaikan lainnya, berikut ini adalah open-ended tanpa wadah

Perbaikan-perbaikan lain baik mengharuskan elemen melayang berada dalam wadah yang ditandai dengan baik atau membutuhkan ekstra, kosong secara semantik <div>. Sebaliknya, pemisahan konten dan markup yang jelas membutuhkan solusi CSS yang ketat untuk masalah ini.

Fakta bahwa seseorang perlu menandai akhir float, tidak memungkinkan untuk pengaturan huruf CSS tanpa pengawasan .

Jika yang terakhir adalah tujuan Anda, pelampung harus dibiarkan terbuka untuk apa saja (paragraf, daftar tertata dan tidak terurut dll) untuk membungkusnya, sampai "perbaikan jelas" ditemukan. Misalnya, clearfix mungkin diatur oleh tajuk baru.

Inilah mengapa saya menggunakan clearfix berikut dengan heading baru:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Solusi ini digunakan secara luas di situs web saya untuk menyelesaikan masalah: Teks di sebelah miniatur yang melayang pendek dan margin atas objek kliring berikutnya tidak dihormati.

Ini juga mencegah intervensi manual ketika secara otomatis menghasilkan PDF dari situs. Ini adalah halaman contoh .

Saya selalu menggunakan micro-clearfix :

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

Dalam Cascade Framework saya bahkan menerapkannya secara default pada elemen level blok. IMO, menerapkannya secara default pada elemen level blok memberikan elemen level blok perilaku yang lebih intuitif daripada perilaku tradisional mereka. Ini juga membuatnya lebih mudah bagi saya untuk menambahkan dukungan untuk browser lama ke Cascade Framework (yang mendukung IE6-8 dan juga browser modern).

Anda juga bisa memasukkan ini ke dalam CSS Anda:

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

Dan tambahkan kelas "cb" ke div induk Anda:

<div id="container" class="cb">

Anda tidak perlu menambahkan apa pun ke kode asli Anda ...

Sudahkah Anda mencoba ini:

<div style="clear:both;"/>

Saya tidak punya masalah dengan metode ini.

Metode Favorit Saya adalah membuat kelas clearfix dalam dokumen css / scss saya seperti di bawah ini

.clearfix{
    clear:both
}

Dan kemudian menyebutnya di dokumen html saya seperti yang ditunjukkan di bawah ini

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

Ini adalah clearfix yang sangat sederhana untuk menyelesaikan masalah ketika kita menggunakan properti float di dalam elemen div. Jika kita menggunakan dua elemen div, float: left; dan yang lainnya sebagai float: right; kita bisa menggunakan clearfix untuk induk dari dua elemen div. Jika kami menolak menggunakan clearfix, ruang yang tidak perlu diisi dengan konten di bawah ini dan struktur situs akan rusak.