Bagaimana menghapus gerakan mengambang (Clearfix)
- Halaman sebelumnya Sama tinggi
- Halaman berikutnya Floating responsif
Belajar bagaimana menggunakan teknik clearfix untuk menghapus gerakan mengambang.
Bagaimana menghapus gerakan mengambang (Clearfix)
Elemen yang mengikuti elemen mengambang akan mengalir mengelilinginya. Gunakan penyelesaian clearfix untuk memecahkan masalah ini:
Tidak menggunakan Clearfix
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
Menggunakan Clearfix
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
Teknik clearfix
Jika elemen yang lebih tinggi daripada elemen yang mengandungnya dan ia mengambang, maka ia akan keluar dari kontainernya.
Lalu, kami dapat menambahkan overflow: auto; untuk memecahkan masalah ini:
Contoh
.clearfix {
overflow: auto;
}
Selama Anda dapat mengendalikan margin luar dan margin dalam,overflow: auto; efek menghapus gerakan mengambang sangat baik (selain itu, Anda mungkin melihat scrollbar).
Namun, teknik clearfix yang baru dan modern lebih aman untuk digunakan, sebagian besar halaman web menggunakan kode berikut:
Contoh
.clearfix::after {
content: "";
clear: both;
display: table;
}
Halaman yang berhubungan
Tutorial:Floating CSS
- Halaman sebelumnya Sama tinggi
- Halaman berikutnya Floating responsif
