Tata Letak CSS- float dan clear

Properti mengambang menentukan apakah suatu elemen harus melayang atau tidak.Properti yang jelas digunakan untuk mengendalikan perilaku elemen mengambang.

float Property/ Properti mengapung

Dalam penggunaannya yang paling sederhana, properti float bisa digunakan untuk membungkus teks di sekitar gambar.Contoh berikut menentukan bahwa gambar harus melayang ke kanan dalam sebuah teks:Contoh

img {
    float: right;
    margin: 0 0 10px 10px;
}

Properti Clear 
Properti clear digunakan untuk mengendalikan perilaku elemen mengambang.Elemen setelah elemen mengambang akan mengalir disekitarnya. Untuk menghindarinya, gunakan properti clear.Properti yang jelas menentukan sisi elemen elemen mengambang yang tidak diperbolehkan mengapung:Contoh

div {
    clear: left;
}

The clearfix Hack - overflow: auto; 
Jika elemen lebih tinggi dari elemen yang mengandungnya, dan benda itu melayang, benda itu akan meluap di luar wadahnya.Lalu kita bisa menambahkan overflow: auto; Ke elemen yang berisi untuk memperbaiki masalah ini:Contoh

.clearfix {
    overflow: auto;
}

Contoh Tata Letak Web 
Adalah umum untuk melakukan keseluruhan layout web menggunakan properti float: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;
}

.Semua CSS Float Properties 
clear Menentukan di sisi mana elemen di mana elemen mengambang tidak diizinkan mengapung
 Float Menentukan apakah suatu elemen harus melayang atau tidak
 Overflow Menentukan apa yang terjadi jika konten meluap pada kotak elemen
 Overflow-x Menentukan apa yang harus dilakukan dengan sisi kiri / kanan konten jika melimpah pada area konten elemen
 Overflow-y Menentukan apa yang harus dilakukan dengan tepi atas / bawah konten jika melimpah pada area konten elemen

Share :

Tweet

✚

Related Post