Dwi Pramono: Belajar Menggunakan Properti Float dan Clear dengan Benar

Jika anda akan membuat suatu website, ada 90% kemungkinan bahwa anda akan menggunakan properti float dan clear. Float adalah properti CSS yang digunakan untuk memanipulasi posisi sebuah elemen HTML sehingga akan terlihat seperti melayang. Dengan kata lain elemen tersebut akan terlihat menimpa elemen HTML lainnya (yang tidak memiliki properti float). Lain halnya dengan clear, elemen HTML dengan properti ini akan melarang elemen float untuk berada di sekitarnya. Ada beberapa kondisi yang perlu diperhatikan dalam menggunakan properti float dan clear supaya anda tidak merasa kerepotan di masa depan.

Mengapa Menggunakan Float?

Sebagian besar orang menggunakan properti float untuk mengatur tata letak gambar atau elemen div. Jika kita menulis sebuah paragraf dan ingin menyisipkan gambar di paragraf tersebut, maka kita menginginkan supaya gambar tersebut tidak ‘terbawa arus’ teks yang kita ketik. Yang kita inginkan adalah supaya gambar tersebut tetap berada pada tempatnya dan teks yang kita ketik tidak menghalanginya ataupun sebaliknya. Sebagai contoh adalah sebuah artikel yang diambil dari website The New York Times:

Letak gambar dan boks pada artikel tidak berpengaruh terhadap aliran teks

Elemen yang paling sering menggunakan properti ini adalah div. Div sering digunakan sebagai wadah dari konten yang ingin dibuat floating. Tak heran ketika desain website tahun 90an masih banyak menggunakan table, kini website-website modern banyak yang meng-abuse penggunaan div sebagai pengganti dari table. Contoh penggunaannya bisa dilihat pada gambar mockup desain baru detikFood berikut ini:

Float banyak digunakan untuk membuat blok-blok elemen supaya terstruktur dengan baik

Bagaimana Cara Menggunakan Float?

Properti Float memiliki value sebagai berikut: left, right, none, dan inherit. Pada dasarnya setiap elemen HTML itu memiliki float dengan value none (float:none), alias tidak memiliki float. Left akan membuat elemen melayang ke sebelah kiri dan sebaliknya dengan Right. Inherit akan kita bicarakan di lain kesempatan karena value properti ini berlaku untuk semua properti CSS. Untuk menggunakannya, cukup menuliskan seperti berikut ini:

/* Contoh Float Left */
.floatleft {
    float: left;
}
 
/* Contoh Float Right */
.floatright {
    float: right;
}
 
/* Contoh Float None */
.floatnone {
    float: none;
}
 
/* Contoh Float Inherit */
.floatinherit {
    float: inherit;
}

Mengapa Menggunakan Clear?

Clear digunakan untuk membuat sebuah elemen terhindar dari elemen-elemen float. Setelah sebelumnya kita belajar mengenai Float, properti Clear digunakan untuk membersihkan elemen berikutnya dari elemen float. Untuk memperjelasnya, mari kita bandingkan kedua skenario berikut ini:

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 secara kasar sebagai berikut: div yang berwarna kuning tidak menganggap div hijau dan orange sebagai konten karena mereka memiliki float. Float, sebagaimana dijelaskan diawal, menganggap bahwa dirinya ‘melayang’ dan beda stratanya dengan div yang tanpa float. Sehingga, untuk mengembalikan mereka seperti strata awalnya, diperlukan sebuah elemen dengan properti Clear. Clear tidak terpengaruh oleh Float, sehingga ia akan selalu dibawah float. Dan Clear itu adalah properti inline, sehingga ia akan dianggap sebagai konten oleh div berwarna kuning. Maka dari itu, div kuning akan menangkup div dengan clear beserta div yang floating diatasnya.
Ini merupakan konsep dasar mengenai float dan clear yang harus dimengerti oleh desainer website. Cobalah untuk mengamati bagaimana website-website lain menggunakan properti float dan clear tersebut dalam CSS mereka.

Bagaimana Cara Menggunakan Clear?

Value untuk Clear adalah: left, right, both, none, dan inherit. Clear:left menandakan bahwa di sebelah kiri elemen dengan properti ini tidak boleh ada float. Begitu pula sebaliknya untuk Clear:right. Sedangkan Clear:both digunakan untuk membersihkan kedua sisi elemen dari elemen-elemen float. Penulisannya adalah sebagai berikut:

/* 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 dan Kapan Harus Menggunakan Clear?

Pertanyaan yang satu ini seringkali saya pikirkan ketika masih baru belajar CSS: “Kapan, sih, waktu yang tepat untuk menggunakan Float dan Clear?” Mari kita pelajari kondisi-kondisinya satu persatu:

Untuk Mensejajarkan Dua Buah Elemen Atau Lebih

Ini adalah kondisi yang paling lumrah terjadi, dua buah elemen atau lebih ingin disejajarkan. Perlu diingat bahwa elemen Float ini tidak dapat berdiri sendiri, ia membutuhkan properti CSS lainnya supaya bisa tercapai layout keinginan kita. Sebagai contoh:

Untuk kondisi ini, properti float sangat bergantung kepada width

Jika sebuah div dengan float memiliki konten yang penuh (misalnya diisi dengan teks), div tersebut akan auto expand karena div memiliki nilai default width:auto. Sehingga, gambar bagian kiri akan terjadi pada div anda. Untuk mengatasi hal ini, kita harus membatasi width div tersebut dengan memberikan nilai numerik kepada width nya. Sehingga yang terjadi adalah width tidak memenuhi seluruh halaman sehingga cukup ruang untuk div dengan float:left lainnya untuk menyejajarkan diri.

Membuat Image yang Floating di dalam Paragraf

Jika anda memiliki paragraf yang di dalamnya terdapat image, maka float merupakan solusi yang tepat untuk hal ini. Apakah width harus dibatasi juga? Tidak perlu, supaya anda bisa dengan fleksibel menaruh image dalam berbagai ukuran. Ilustrasinya sebagai berikut:

Meratakan Div-Div yang Floating Dengan Clear

Ibaratkan anda membuat sebuah website e-commerce, untuk mendisplay produk-produk anda dengan baik tentunya menggunakan float pada div yang menampung gambar produk anda. Floating sudah benar, tapi tampilan tidak rapi? Pakailah Clear seperlunya! Lihat ilustrasi berikut ini:

Pemakaian float untuk elemen yang heightnya tidak beraturan bisa menyebabkan kekacauan seperti di gambar sebelah kiri

Mengapa bisa kacau begitu? Karena height nya tidak dibuat fix. Lantas, kenapa tidak dibuat fix saja? Kalau dibuat fix, maka konten di dalamnya akan terbatas, dan jika melebih batas akan terlihat sangat jelek. Disinilah sebuah div dengan properti Clear berperan. Div dengan clear:both diletakkan setelah div float yang ke-empat, supaya bagian atas div-div tersebut terlihat sejajar dan satu baris akan terdiri dari 4 div.

Mengatasi Bug “Double Margin” Pada Internet Explorer 6

Karena 90% situs menggunakan properti Float, maka sudah pasti akan menemui bug “Double Margin” untuk Internet Explorer (IE) 6. Bug ini muncul karena sebuah div memiliki float yang dikombinasikan dengan padding dan margin. Jika padding tidak diberikan, bug ini tidak muncul. Apa efek yang ditimbulkan dari bug ini? Yang terjadi adalah, IE 6 membaca margin left atau margin right menjadi dua kali lipat nominal yang disebutkan di CSS. Browser lain membacanya dengan benar kecuali IE 6. Solusinya adalah dengan memberikan display:inline. Berikut ini contohnya:

.divleft {
    margin: 5px 10px 5px 10px; /* Terbaca di IE 6 sebagai: 5px 20px 5px 20px */
    padding: 10px;
    float: left;
}
 
/* solusi */
.divleft {
    margin: 5px 10px 5px 10px; 
    padding: 10px;
    float: left;
    display: inline; /* Supaya IE 6 membacanya dengan benar */
}

Demikianlah tutorial mengenai bagaimana menggunakan properti Float dan Clear dengan benar. Silakan beri komentar apabila anda menyukai artikel ini atau apabila anda menemukan kesalahan-kesalahan yang perlu untuk saya perbaiki. ReTweet dan Share akan sangat dihargai

sumber : http://cssasyik.com

Dwi Pramono

Jul 18, 2011

Belajar Menggunakan Properti Float dan Clear dengan Benar