Apa yang dilakukan aturan CSS berikut:

.clear { clear: both; }

Dan mengapa kita perlu menggunakannya?

Saya tidak akan menjelaskan bagaimana float bekerja di sini (secara rinci), karena pertanyaan ini umumnya berfokus pada Mengapa menggunakan clear: both;ATAU apa yang clear: both;sebenarnya dilakukan ...

Saya akan membuat jawaban ini sederhana, dan to the point, dan akan menjelaskan kepada Anda secara grafis mengapa clear: both;diperlukan atau apa fungsinya ...

Umumnya desainer mengapung elemen, kiri atau ke kanan, yang menciptakan ruang kosong di sisi lain yang memungkinkan elemen lain untuk mengambil ruang yang tersisa.

Mengapa mereka mengapung elemen?

Elemen melayang ketika desainer membutuhkan 2 elemen tingkat blok berdampingan. Misalnya katakanlah kami ingin merancang situs web dasar yang memiliki tata letak seperti di bawah ini ...

Contoh langsung dari gambar demo.

Kode Untuk Demo

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Catatan: Anda mungkin harus menambahkan header, footer, aside, section(dan elemen HTML5 lainnya) sebagai display: block;dalam stylesheet Anda untuk secara eksplisit menyebutkan bahwa unsur-unsur adalah elemen tingkat blok.

Penjelasan:

Saya memiliki tata letak dasar, 1 tajuk, 1 bilah samping, 1 area konten, dan 1 catatan kaki.

Tanpa mengapung header, berikutnya adalah asidetag yang akan saya gunakan untuk bilah sisi situs web saya, jadi saya akan melayang elemen ke kiri.

Catatan: Secara default, elemen level blok membutuhkan lebar dokumen 100%, tetapi ketika melayang ke kiri atau kanan, ia akan mengubah ukuran sesuai dengan konten yang dipegangnya.

1. Perilaku Normal Elemen Tingkat Blok
2. Perilaku Floated Elemen Tingkat Blok

Jadi seperti yang Anda perhatikan, sayap melayang divmembuat ruang di sebelah kanannya tidak digunakan, yang akan memungkinkan ruang divsetelahnya bergeser di ruang yang tersisa.

1. divAkan membuat satu demi satu jika mereka TIDAK mengambang
2. div akan bergeser berdampingan jika melayang ke kiri atau kanan

Ok, jadi ini adalah bagaimana elemen-elemen level blok berperilaku ketika melayang ke kiri atau kanan, jadi sekarang mengapa clear: both;diperlukan dan mengapa?

Jadi, jika Anda perhatikan di demo tata letak - dalam kasus Anda lupa, di sini itu ..

Saya menggunakan kelas yang dipanggil .cleardan memegang properti yang disebut cleardengan nilai both. Jadi mari kita lihat mengapa perlu both.

Saya sudah melayang asidedan sectionelemen ke kiri, jadi anggap skenario, di mana kita memiliki kolam, di mana headertanah padat, asidedan sectionmengambang di kolam renang dan catatan kaki adalah tanah padat lagi, sesuatu seperti ini ..

Jadi air biru tidak tahu berapa luas elemen terapung itu, mereka bisa lebih besar dari kolam atau lebih kecil, jadi inilah masalah umum yang menyulitkan 90% pemula CSS: mengapa latar belakang elemen wadah tidak direntangkan ketika memegang elemen melayang. Itu karena elemen penampung adalah POOL di sini dan POOL tidak tahu berapa banyak benda yang melayang, atau berapa panjang atau luasnya elemen melayang itu, sehingga tidak akan meregang.

1. Aliran Normal Dokumen
2. Bagian Melayang Ke Kiri
3. Elemen Apung Yang Dihapus Untuk Meregangkan Warna Latar Belakang Wadah

(Rujuk ^[Clearfix] jawaban ini untuk cara yang rapi untuk melakukan ini. Saya menggunakan divcontoh kosong dengan sengaja untuk tujuan penjelasan)

Saya telah memberikan 3 contoh di atas, 1 adalah aliran dokumen normal di mana redlatar belakang hanya akan merender seperti yang diharapkan karena wadah tidak memegang benda melayang.

Dalam contoh kedua, ketika objek melayang ke kiri, elemen wadah (POOL) tidak akan tahu dimensi elemen yang melayang dan karenanya tidak akan meregang ke ketinggian elemen melayang.

Setelah menggunakan clear: both;, elemen kontainer akan ditarik ke dimensi elemen apung.

Alasan lain yang clear: both;digunakan adalah untuk mencegah elemen bergeser ke atas di ruang yang tersisa.

Katakanlah Anda ingin 2 elemen berdampingan dan elemen lain di bawahnya ... Jadi Anda akan mengapung 2 elemen ke kiri dan Anda ingin yang lain di bawahnya.

1. divMelayang ke kiri mengakibatkan sectionpindah ke ruang yang tersisa
2. Floated divdihapus sehingga sectiontag akan ditampilkan di bawah floated divs

Contoh 1

Contoh ke-2

Terakhir tetapi tidak kalah pentingnya, footertag akan diberikan setelah elemen terapung karena saya telah menggunakan clearkelas sebelum mendeklarasikan footertag saya , yang memastikan bahwa semua elemen terapung (kiri / kanan) dibersihkan hingga titik itu.

Clearfix

Datang ke clearfix yang terkait dengan pelampung. Seperti yang sudah ditentukan oleh @Elky , cara kita membersihkan float ini bukanlah cara yang bersih untuk melakukannya karena kita menggunakan divelemen kosong yang bukan merupakan divelemen yang dimaksudkan untuk itu. Oleh karena itu inilah clearfix.

Anggap saja sebagai elemen virtual yang akan membuat elemen kosong untuk Anda sebelum elemen induk Anda berakhir. Ini akan membersihkan sendiri elemen pembungkus Anda yang memegang elemen mengambang. Elemen ini tidak akan ada di DOM Anda secara harfiah tetapi akan melakukan pekerjaan.

Untuk menghapus sendiri elemen pembungkus yang memiliki elemen apung, kita dapat menggunakan

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Perhatikan :afterelemen pseudo yang digunakan oleh saya untuk itu class. Itu akan membuat elemen virtual untuk elemen pembungkus tepat sebelum menutup sendiri. Jika kita melihat dom Anda bisa melihat bagaimana itu muncul di pohon dokumen.

Jadi jika Anda lihat, itu diberikan setelah anak melayang di divmana kami membersihkan mengapung yang tidak lain adalah memiliki divelemen kosong dengan clear: both;properti yang kami gunakan untuk ini juga. Sekarang mengapa display: table;dan di contentluar ruang lingkup jawaban ini tetapi Anda dapat mempelajari lebih lanjut tentang elemen semu di sini .

Perhatikan bahwa ini juga akan berfungsi di IE8 karena IE8 mendukung :afterpseudo .

Jawaban asli:

Sebagian besar pengembang mengapung konten mereka ke kiri atau kanan di halaman mereka, mungkin div memegang logo, sidebar, konten dll., Div ini melayang ke kiri atau kanan, meninggalkan sisa ruang yang tidak digunakan dan karenanya jika Anda menempatkan wadah lain, itu akan mengapung juga di ruang yang tersisa, jadi untuk mencegahnya clear: both; digunakan, itu menghapus semua elemen melayang ke kiri atau kanan.

Demonstrasi:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Sekarang bagaimana jika Anda ingin membuat div lain di bawah div1, jadi Anda akan menggunakannya clear: both;sehingga akan memastikan Anda menghapus semua pelampung, kiri atau kanan

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

The clearproperti menunjukkan bahwa kiri, kanan atau kedua sisi elemen tidak bisa berdekatan dengan elemen sebelumnya melayang dalam konteks format blok yang sama. Elemen yang dibersihkan didorong di bawah elemen melayang yang sesuai. Contoh:

clear: none; Elemen tetap berdekatan dengan elemen melayang

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Elemen didorong di bawah elemen melayang kiri

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Elemen didorong di bawah elemen melayang kanan

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Elemen didorong di bawah semua elemen melayang

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear tidak mempengaruhi mengapung di luar konteks pemformatan blok saat ini

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS mengambang dan jelas

Contoh biola

Coba hapus clear:bothproperti dari divwith class sampledan lihat caranya berikut mengambang divs.

Jawaban Pak Alien sempurna, tapi bagaimanapun saya tidak merekomendasikan untuk menggunakannya <div class="clear"></div>karena ini hanya peretasan yang membuat markup Anda kotor. Ini tidak berguna kosong divdalam hal struktur dan semantik yang buruk, ini juga membuat kode Anda tidak fleksibel. Di beberapa browser div ini menyebabkan ketinggian tambahan dan Anda harus menambahkan height: 0;yang lebih buruk. Tapi masalah sebenarnya dimulai ketika Anda ingin menambahkan latar belakang atau perbatasan di sekitar elemen melayang Anda - itu hanya akan runtuh karena web dirancang dengan buruk . Saya merekomendasikan untuk membungkus elemen apung ke dalam wadah yang memiliki aturan CSS clearfix . Ini juga hack, tetapi indah, lebih fleksibel untuk digunakan dan dapat dibaca untuk robot manusia dan SEO.

Ketika Anda ingin satu elemen ditempatkan di bagian bawah elemen lain Anda menggunakan kode ini di CSS. Digunakan untuk mengapung.

Jika Anda melayang konten, Anda dapat melayang kiri atau kanan ... jadi dalam tata letak umum Anda mungkin memiliki nav kiri, div konten dan footer.

Untuk memastikan footer tetap di bawah kedua mengapung ini (jika Anda melayang kiri dan kanan) maka Anda meletakkan footer sebagai clear: both.

Dengan cara ini akan tetap berada di bawah kedua pelampung.

(Jika Anda hanya membersihkan kiri maka Anda hanya benar-benar perlu clear: left;.)

Ikuti tutorial ini: