Rancang Bangun Layout CSS - Clear dan clearfix

Atribut clear

clear Atribut ini menentukan elemen mana yang dapat menggerak ke samping elemen yang dihapus dan di sisi mana.

clear Atribut ini dapat diatur dengan salah satu nilai berikut:

  • tidak ada - Diizinkan ada elemen yang menggerak di keduanya. Nilai default
  • kiri - Tidak diizinkan ada elemen yang menggerak di kiri
  • kanan - Tidak diizinkan ada elemen yang menggerak di kanan
  • keduanya - Tidak diizinkan ada elemen yang menggerak di kiri atau kanan
  • inherit - elemen mewarisi nilai clear dari induknya

dengan clear Penggunaan paling sering dari atribut ini adalah dalam elemen yang digunakan float setelah atribut.

Pada waktu menghapus gerakan, seharusnya untuk mematching hapus dengan gerakan: jika elemen menggerak ke kiri, maka seharusnya menghapus kiri. Elemen gerakan Anda akan terus menggerak, tetapi elemen yang dihapus akan ditampilkan di bawahnya.

Contoh di bawah ini akan menghapus gerakan ke kiri. Ini menunjukkan bahwa di sisi kiri (div) tidak diizinkan untuk ada elemen yang menggerak:

Contoh

div {
  clear: kiri;
}

Coba Sendiri

Hack clearfix

Jika elemen lebih tinggi daripada elemen yang mengandungnya dan ia bergerak, ia akan “kelebihan” keluar ke luar kontainernya:

Lalu kami dapat menambahkan overflow: auto; ke elemen pengembung untuk menyelesaikan masalah ini:

Contoh

.clearfix {
  overflow: auto;
}

Coba Sendiri

Jika Anda dapat mengendalikan margin luar dan margin dalam (jika tidak, Anda mungkin akan melihat batang gerak), overflow: auto clearfix akan berfungsi dengan baik. Namun, teknik hack clearfix modern yang baru ini lebih aman untuk digunakan, kode berikut ini digunakan di banyak situs:

Contoh

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

Coba Sendiri

Anda akan belajar hal ini di bab yang akan datang ::after Element Falsifikasi.