Jika Anda sering melakukan website design, Anda akan akrab dengan properti Float dan properti Clear. Apa perbedaan diantara keduanya?
Float adalah properti CSS yang digunakan untuk memanipulasi posisi sebuah elemen HTML sehingga akan terlihat seperti mengapung (= “float.”)
Elemen tersebut akan terlihat menimpa elemen HTML lain (yang tidak memiliki properti float).
Lain halnya dengan clear.
Elemen HTML dengan properti clear melarang elemen float untuk berada di sekitarnya.
Mengapa Menggunakan Float?
Penggunaan properti float untuk mengatur Layout Gambar atau elemen div. Jika Anda menulis text-paragraph dan ingin menyisipkan gambar, Anda pasti menginginkan gambar tersebut tidak ‘
terbawa arus’ teks yang diketik. Kita inginkan gambar tetap ada di tempatnya dan teks yang diketik tidak menghalanginya atau sebaliknya. Seperti artikel dari website
The New York Times dibawah ini:
Letak gambar dan boks pada artikel tidak berpengaruh terhadap aliran teks
Elemen yang menggunakan properti float adalah DIV. DIV sering digunakan sebagai wadah konten yang ingin dibuat floating. Desain website tahun 90an banyak menggunakan table, kini website modern banyak menggunakan DIV sebagai pengganti table.
Float banyak digunakan untuk membuat blok-blok elemen supaya terstruktur dengan baik
Bagaimana Cara Menggunakan Float?
Properti Float memiliki value : left, right, none, dan inherit. Setiap elemen HTML secara default memiliki float dengan value none (float:none) - (tidak memiliki float). Property “float; left;” akan membuat elemen melayang di sebelah kiri dan sebaliknya, property “float; right;” menjadikan elemen melayang di sebelah kanan. Property Inherit tidak dibahas. Untuk penggunaannya, cukup ditulis seperti ini:
| /* Contoh Float Left dibawah ini: */
.floatleft {
float: left;
}
/* Contoh Float Right dibawah ini: */
.floatright {
float: right;
}
/* Contoh Float None dibawah ini: */
.floatnone {
float: none;
}
/* Contoh Float Inherit dibawah ini: */
.floatinherit {
float: inherit;
} |
Mengapa Menggunakan Clear?
Properti Clear digunakan untuk membuat suatu elemen terhindar dari elemen-elemen
float. Bandingkan kedua skenario berikut:
Jika tanpa Clear, sebuah DIV akan 'collapsed' seperti gambar di sebelah kiri. Dengan Clear, DIV akan menganggap bahwa elemen di dalamnya tidak memiliki Float. Yang terjadi dengan gambar di sebelah kiri bisa dijelaskan sebagai berikut:
DIV KUNING tidak menganggap DIV HIJAU dan DIV ORANGE sebagai konten karena mereka memiliki float. DIV Float menganggap bahwa dirinya ‘melayang’ dan beda strata dengan DIV non-float. untuk mengembalikan mereka seperti strata awalnya, DIV KUNING perlu dilengkapi dengan properti Clear. DIV Clear tidak terpengaruh oleh Float, sehingga akan selalu berada dibawah float.
Properti Clear adalah properti inline, sehingga properti itu akan dianggap sebagai konten oleh DIV KUNING. Karena itulah, DIV KUNING akan menangkup DIV dengan properti clear beserta div yang floating diatasnya. Ini konsep dasar mengenai float dan clear yang harus dimengerti oleh desainer website.
Bagaimana Cara Menggunakan Clear?
Value untuk
Clear adalah:
left, right, both, none, dan
inherit.
Clear:left menandakan bahwa sebelah kiri elemen dengan properti ini tidak boleh ada float.
Clear:right menandakan bahwa sebelah kanan elemen dengan properti ini tidak boleh ada float.
Clear:both digunakan untuk membersihkan kedua sisi elemen dari elemen-elemen float.
Penulisannya seperti ini:
| /* Contoh Clear Left */
.clearleft {
clear:left;
}
/* Contoh Clear Right */
.clearright {
clear:right;
}
/* Contoh Clear Both */
.clearboth {
clear:both;
}
/* Contoh Clear None */
.clearnone {
clear:none;
} |
Kapan Harus Menggunakan Float? Kapan Harus digunakan Clear?
Pertanyaan itu tentu sangat mengganggu dan akan kita cari jawaban. Kita analisis kondisinya satu persatu.
Untuk Mensejajarkan 2 Elemen Atau Lebih
Kondisi ini paling sering terjadi. INGAT!! Elemen Float tidak bisa berdiri sendiri, ia memerlukan properti CSS lain agar LAYOUT sesuai dengan keinginan.
Untuk kondisi ini, properti float sangat bergantung kepada width
Jika sebuah DIV dengan float sudah memiliki konten yang penuh (misalnya paragraf teks), maka DIV tersebut akan auto-expand karena nilai sudah diatur secara default ---> width:auto. Sehingga akan terjadi seperti “ilustrasi gambar sebelah KIRI” Elemen div berupa text paragraf text (warna hijau) di bagian atas. Elemen div berisi gambar (warna Orange) akan bergeser ke bawahnya. Atau gambar terbawa arus “ketikan teks.”
SOLUSI : Anda harus membatasi width div tersebut dengan memberi nilai numerik. Sehingga yang terjadi adalah width tidak akan memenuhi seluruh halaman dan cukup ruang untuk div dengan float:left lain. Hasilnya seperti “ilustrasi gambar sebelah KANAN.” Paragraf text di sebelah kiri dan elemen gambar sejajar di sebelah kanan.
Penerapan property float untuk membuat 2 gambar sejajar horizontal.
Snippet 2 gambar seperti ini:
Pemakaian float untuk elemen yang “height”-nya tidak beraturan akan menyebabkan kekacauan seperti ilustrasi sebelah kiri. Mengapa kacau?
Website pengguna properti Float, pasti akan menemui bug “Double Margin” untuk IE 6. Bug muncul karena sebuah DIV yang memiliki float dikombinasikan dengan padding dan margin. Jika padding tidak diberikan, bug ini tidak muncul. Apa akibat dari bug ini?