Pengaturan Layout CSS - clear dan clearfix

Atribut clear

clear Atribut ini menentukan elemen mana yang boleh mengambang di sebelah elemen yang dihapus dan di pihak mana.

clear Atribut ini dapat diatur dengan salah satu nilai berikut:

  • none - diizinkan keduanya ada penambangan. Nilai baku
  • kiri - kiri tidak diizinkan terdapat elemen penambangan
  • kanan - kanan tidak diizinkan terdapat elemen penambangan
  • both - kiri atau kanan tidak diizinkan terdapat elemen penambangan
  • inherit - elemen mewarisi nilai clear dari induknya

dengan clear Penggunaan paling biasa atribut ini adalah digunakan di atas elemen float setelah atribut.

Dalam menghapus penambangan, seharusnya disesuaikan dengan penambangan dan penghapusan: jika elemen mengambang ke kiri, seharusnya menghapus kiri. Elemen penambangan anda akan terus mengambang, tetapi elemen yang dihapus akan ditampilkan di bawahnya.

Contoh di bawah akan menghapus penambangan ke kiri. Ini menunjukkan bahawa di sebelah kiri (div) tidak diizinkan terdapat elemen penambangan:

实例

div {
  clear: kiri;
}

亲自试一试

clearfix Hack

Jika seorang elemen lebih tinggi daripada elemen yang memuatnya dan dia mengambang, dia akan 'kelebihan' keluar dari dalaman bekasannya:

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

实例

.clearfix {
  overflow: auto;
}

亲自试一试

只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：

实例

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

亲自试一试

您将在稍后的章节学到 ::after 元素伪