The float properti menentukan apakah atau tidak unsur harus mengapung.
The clear properti digunakan untuk mengontrol perilaku elemen mengambang.
Float Properti
Dalam penggunaannya sederhana, float properti dapat digunakan untuk membungkus teks di sekitar gambar.
Contoh berikut menetapkan bahwa gambar harus mengapung ke kanan dalam teks:
The clear Properti
The clear properti digunakan untuk mengontrol perilaku elemen mengambang.
Elemen setelah elemen mengambang akan mengalir di sekitarnya. Untuk menghindari hal ini, gunakan clear properti.
The clear properti menentukan di mana sisi elemen mengambang elemen tidak diizinkan untuk mengapung:
The clearfix Hack - overflow: auto;
Jika unsur lebih tinggi dari elemen yang berisi itu, dan itu melayang, itu akan meluap di luar wadah.
Maka kita dapat menambahkan overflow: auto; ke elemen yang mengandung untuk memperbaiki masalah ini:
Web Layout Contoh
Hal ini umum untuk melakukan seluruh layout web menggunakan float properti:
Contoh
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Cobalah sendiri " 
Contoh lebih
Gambar dengan perbatasan dan margin yang mengapung ke kanan di paragraf
Membiarkan mengambang gambar ke kanan dalam sebuah paragraf. Tambahkan perbatasan dan margin untuk gambar.
Sebuah gambar dengan keterangan yang mengapung ke kanan
Biarkan gambar dengan pelampung caption ke kanan.
Biarkan huruf pertama dari float ayat ke kiri
Biarkan huruf pertama dari float ayat ke kiri dan gaya huruf.
Membuat menu horizontal
Gunakan mengambang dengan daftar hyperlink untuk membuat menu horizontal.
Membuat homepage tanpa tabel
Gunakan pelampung untuk membuat homepage dengan header, footer, konten kiri dan konten utama.
Semua CSS Lampung Properti
| Milik | Deskripsi |
|---|---|
| clear | Menentukan di mana sisi elemen mana unsur mengambang tidak diizinkan untuk mengapung |
| float | Menentukan apakah atau tidak unsur harus mengapung |
| overflow | Menentukan apa yang terjadi jika konten meluap kotak elemen ini |
| overflow-x | Menentukan apa yang harus dilakukan dengan kiri / kanan tepi konten jika meluap area konten elemen |
| overflow-y | Menentukan apa yang harus dilakukan dengan tepi atas / bawah konten jika meluap area konten elemen |