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:
/* snippet gambar pertama */
<p><a href="$image12.png"><img style="border-right-width: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Palm oil in Inspiring Quotes" border="0" alt="Palm oil in Inspiring Quotes" src="$image_thumb6.png" width="118" height="85" /></a>
/* snippet gambar kedua */
<a href="$image13.png"><img style="border-right-width: 0px; margin: 0px auto 4px; display: block; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Palm oil_Inspiring Quotes" border="0" alt="Palm oil_Inspiring Quotes" src="$image_thumb7.png" width="118" height="85" /></a></p>
<p><a href="$image12.png"><img style="border-right-width: 0px; display: inline; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Palm oil in Inspiring Quotes" border="0" alt="Palm oil in Inspiring Quotes" src="$image_thumb6.png" width="118" height="85" /></a>
/* snippet gambar kedua */
<a href="$image13.png"><img style="border-right-width: 0px; margin: 0px auto 4px; display: block; float: left; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="Palm oil_Inspiring Quotes" border="0" alt="Palm oil_Inspiring Quotes" src="$image_thumb7.png" width="118" height="85" /></a></p>
Ubahlah property float yang pertama diubah menjadi float: right; !! - sebagai latihan
Membuat Image yang Floating di dalam Paragraf
Jika anda memiliki paragraf teks yang di dalamnya ada gambar, maka float menjadi solusi tepat. Apakah width harus dibatasi juga? Tidak perlu, supaya anda bisa fleksibel menaruh image dalam berbagai ukuran. Ilustrasinya dibayangkan saja.
Meratakan Div-Div yang Floating Dengan Clear
Jika anda membuat Website e-Commerce, untuk mendisplay produk-produk anda dengan baik tentunya menggunakan float pada div yang menampung gambar. Floating sudah benar, tapi tampilan tidak rapi? Pakailah Clear seperlunya! Ilustrasi diayangkan saja :
Pemakaian float untuk elemen yang “height”-nya tidak beraturan akan menyebabkan kekacauan seperti ilustrasi sebelah kiri. Mengapa kacau?
Karena height tidak dibuat fix. Lantas, kenapa tidak dibuat fix saja? Kalau dibuat fix, maka konten di dalamnya akan terbatas, dan jika melebih batas - ketikan text misalnya – maka akan terlihat sangat jelek. Disinilah div dengan properti Clear berperan. Div dengan clear:both diletakkan setelah div float yang ke-4, supaya bagian atas div-div tersebut terlihat sejajar, satu baris dan terdiri dari 4 div.
Mengatasi Bug “Double Margin” Pada Internet Explorer 6
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?
AKIBATNYA IE 6 membaca margin left atau margin right menjadi 2 kali lipat nominal yang disebutkan pada CSS. Browser-browser lain membacanya dengan benar kecuali IE 6.
SOLUSI : Tambahkan display:inline.
.divleft {
margin: 5px 10px 5px 10px; /* Terbaca di IE 6 sebagai: 5px 20px 5px 20px */
padding: 10px;
float: left;
}
/* SOLUSINYA */
.divleft {
margin: 5px 10px 5px 10px;
padding: 10px;
float: left;
display: inline; /* Supaya IE 6 membacanya dengan benar */
}
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
