float

Properti float adalah properti penentuan posisi yang digunakan untuk mengubah posisi elemen dalam halaman web, dan mendorongnya ke kiri atau ke kanan wadahnya.

Elemen tetap dalam aliran alami halaman, tetapi didorong ke salah satu arah di dalam wadahnya.

Konten yang tersisa dalam aliran alami halaman akan membungkus elemen melayang (float).

Elemen float adalah elemen yang nilai properti apatnya disetel ke nilai selain none.

Konten yang mengikuti elemen float akan membungkus di kedua sisi elemen, bukan di kedua sisi.

Elemen yang melayang ke kiri memiliki konten yang membungkus di sisi kanannya, dan elemen yang melayang di sebelah kanan memiliki konten yang membungkus di sisi kiri.

Suatu elemen dapat diapungkan ke kanan atau ke kiri. Dan juga bisa mewarisi nilai float dari wadah induknya.

Contoh penggunaan float bisa dijumpai pada desain layout blog yang menempatkan gambar pada sebelah kiri, kemudian diikuti teks di sisi kanannya seperti pada preview berikut:

Pada contoh diatas, elemen img saya beri properti CSS float: left;

img {
float: left;
}

Normalnya, jika elemen img tidak ditentukan dengan properti float, akan menggunakan nilai default float:none;.

Jadi elemen img tidak akan melayang di sebelah kiri, dan elemen teks akan mengikuti di bagian bawah gambar.

Seperti preview berikut:

Yang harus Kamu pahami tentang Properti float.

Ada aturan tertentu yang mengatur perilaku float di CSS. Berikut ini aturan yang ditentukan dalam spesifikasi untuk elemen float:

• Tepi terluar elemen float yaitu, tepi area margin (jika ada). Jika tidak ada, tepi batas elemen tidak dapat melebihi tepi blok yang mengandungnya. Ini berlaku untuk elemen yang melayang ke kiri dan elemen yang melayang ke kanan.
• Elemen yang melayang ke kiri akan diletakkan sejauh mungkin ke kiri, elemen yang melayang ke kanan akan diletakkan sejauh mungkin ke kanan.
• Elemen float akan didorong ke kiri (atau kanan) sampai ujung terluarnya menyentuh tepi blok yang mengandung atau tepi elemen float lain pada halaman.
• Elemen float harus ditempatkan setinggi mungkin dalam aliran halaman. Ketika teks dililitkan di sekitar gambar, misalnya seperti pada contoh diatas, teks dimulai di tepi atas gambar dan terus kebawah sampai mengalir normal dibawah gambar. Tepi paling atas dari elemen float tidak dapat melebihi tepi atas dari blok yang mengandungnya.
• Tepi margin atas elemen float mungkin tidak lebih tinggi dari margin atas elemen level-block atau elemen float yang dihasilkan sebelumnya dalam dokumen sumber.
• Jika lebar elemen float melebihi lebar ruang yang tersedia, itu akan digeser ke bawah ke baris baru.
• Ketika elemen inline seperti gambar melayang, itu menjadi elemen tingkat blok. Yaitu, nilai properti tampilan menjadi blok, bahkan jika nilai tampilan elemen diatur sebaliknya.
• Margin elemen float tidak runtuh dengan margin elemen sekitarnya. Untuk informasi lebih lanjut tentang menyusutkan margin, silakan merujuk ke entri properti margin
• Isi konten float ditumpuk seolah-olah float menghasilkan konteks susun baru, kecuali bahwa setiap elemen yang benar-benar membuat konteks susun baru ambil bagian dalam konteks susun induk orangtua float. Float dapat tumpang tindih dengan kotak lain dalam aliran normal.

Selain perilaku di atas, satu hal penting yang perlu diketahui tentang CSS float adalah bagaimana mereka mempengaruhi wadah induknya.

Ketika sebuah elemen melayang, tinggi wadahnya collapses agar sesuai dengan ketinggian konten yang tersisa di halaman selain elemen yang melayang.

Ini berarti bahwa elemen melayang tidak berkontribusi pada ketinggian wadahnya lagi.

Jadi, jika sebuah wadah tidak berisi apa-apa selain elemen float, tingginya akan menjadi nol, seolah-olah tidak ada konten yang tersedia di dalamnya.

Fenomena ini memiliki efek samping: konten apa pun yang muncul setelah wadah yang collapse akan tumpang tindih dengan elemen melayang (kotak gambar dalam contoh di atas).

Batas-batas wadah kedua dikaburkan oleh elemen melayang dari wadah yang datang sebelumnya.

Kamu mungkin juga memperhatikan bahwa elemen float dari wadah pertama memengaruhi aliran konten di wadah kedua juga.

Teknik untuk Menghapus Float

Perhatikan lagi contoh diatas yang memiliki elemen collapse.

Kamu perlu membersihkan wadah elemen float agar mengembang sesuai dengan ketinggiannya dan mencegahnya tumpang tindih dengan konten lain pada halaman.

Cara yang paling sering digunakan yaitu dengan metode clearfix (menggunakan CSS pseudo selector :after) untuk menghapus float.

.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

Cara ini akan menerapkan sedikit konten, disembunyikan dari tampilan, setelah elemen induk yang menghapus float.

Setelah diberi clearfix

CSS Syntax

float: none | left | right | initial | inherit;

JavaScript Syntax

object.style.cssFloat="left"

Attribute Value