Tata Letak CSS - perbaikan yang jelas dan jelas
Properti yang jelas
Saat kita menggunakan floatproperti, dan kita ingin elemen berikutnya di bawah (bukan di kanan atau kiri), kita harus menggunakan clear
properti.
Properti clearmenentukan apa yang harus terjadi dengan elemen yang berada di sebelah elemen mengambang.
Properti cleardapat memiliki salah satu dari nilai berikut:
-
none- Elemen tidak didorong ke bawah elemen melayang kiri atau kanan. Ini adalah default -
left- Elemen didorong ke bawah elemen melayang kiri -
right- Elemen didorong di bawah elemen melayang kanan -
both- Elemen didorong di bawah elemen melayang kiri dan kanan -
inherit- Elemen mewarisi nilai yang jelas dari induknya
Saat membersihkan float, Anda harus mencocokkan clear dengan float: Jika elemen melayang ke kiri, maka Anda harus membersihkan ke kiri. Elemen melayang Anda akan terus mengambang, tetapi elemen yang dibersihkan akan muncul di bawahnya pada halaman web.
Contoh
Contoh ini membersihkan float ke kiri. Di sini, artinya elemen <div2> didorong ke bawah elemen <div1> yang terapung kiri:
div1 {
float: left;
}
div2 {
clear: left;
}
Peretasan clearfix
Jika elemen melayang lebih tinggi dari elemen yang mengandung, itu akan "meluap" di luar wadahnya. Kami kemudian dapat menambahkan hack clearfix untuk mengatasi masalah ini:
Tanpa Clearfix
Dengan Clearfix
Contoh
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.