Rancang Bangun Layout CSS - Clear dan clearfix
- Hal Sebelumnya Gelombang CSS
- Hal Berikutnya Contoh Gerak Latar Belakang
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; }
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; }
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; }
Anda akan belajar hal ini di bab yang akan datang ::after
Element Falsifikasi.
- Hal Sebelumnya Gelombang CSS
- Hal Berikutnya Contoh Gerak Latar Belakang