Apa itu Float?
Pemahaman sederhananya, float merupakan properti pada CSS untuk mengatur posisi sebuah elemen. Dengan float, kita bisa bebas mengatur posisi kanan atau kiri sebuah elemen dari parent atau pembungkusnya. Pada website, float sering digunakan untuk membuat navbar, sidebar, image gallery, dan lain sebagainya. Di bawah ini adalah contoh perbedaan elemen sebelum dan sesudah diberi float.
Apa saja value/nilai pada Float?
Ada 3 nilai yang bisa kita berikan pada float.
- None.
None merupakan nilai default pada float. Jadi sebelum elemen di beri float, defaultnya adalah none. - Right.
Sesuai dengan katanya, right berarti kanan. Dengan memberi nilai right, maka elemen akan berada pada posisi kanan. - Left.
Selanjutnya left. Dengan memberi nilai left, maka elemen akan berada pada posisi kiri.
Penulisan kodenya seperti di bawah ini.
float: none;
float: right;
float: left;
Sifat dari float adalah Out of Flow. Dalam artian perilaku elemennya berubah. Ia keluar dari flow normalnya. Pada dasarnya setiap elemen mempunyai flow normal. Maksudnya adalah perilaku elemennya sesuai dengan arus atau aturan masing-masing. Misal jika ada 3 elemen berdisplay block, posisinya akan berjejer kebawah. Namun jika berdisplay inline, maka akan berjejer ke samping. Normalnya setiap elemen seperti itu. Agar lebih mudah dipahami, sebagai contoh buatlah sebuah file HTML lalu isi dengan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Float</title>
<style>
div {
width: 150px;
height: 150px;
}
.kotak-1{
background-color: red;
float: left;
}
.kotak-2{
background-color: blue;
}
</style>
</head>
<body>
<div class="kotak-1"></div>
<div class="kotak-2"></div>
</body>
</html>
Pada contoh di atas, kita menambahkan properti float dengan nilai left pada kotak-1. Ternyata setelah dilihat hasilnya kotak-2 menjadi hilang. Seperti yang sudah dijelaskan tadi, elemen yang diberi float akan keluar dari flow normalnya. Oleh kotak-2 kotak-1 dianggap tidak ada. Jadi kotak-2 naik ke atas mengisi tempat kotak-1 namun posisinya berada dibelakang tertutup kotak-1. Agar kelihatan lebih jelas, silahkan ubah float pada kotak-1 menjadi right. Sekarang posisi kotak-1 berada di kanan sejajar dengan kotak-2 yang tertutup tadi. Seperti itulah perilaku dari float.
Posisi pada float adalah bergantung pada parent atau elemen pembungkusnya. Pada contoh di atas, parent dari <div> kotak-1 adalah <body>. Jadi saat diberi float right misalnya, posisinya akan berada di paling kanan dari parentnya. Karena parentnya <body>, maka posisinya akan berada paling kanan pada seluruh area body browser.
Supaya lebih paham, coba beri elemen pembungkus pada <div> kotak-1 dan kotak-2. Misal seperti di bawah ini.
<div class="container">
<div class="kotak-1"></div>
<div class="kotak-2"></div>
</div>
Nah, sekarang parentnya bukan <body> lagi melainkan <div> dengan class container. Jika kita beri lebar pada si container tadi misalnya 50% yakni setengah dari lebar browser. Lalu beri properti float dengan nilai right pada kotak-1, maka sekarang posisi kotak-1 letaknya bukan di paling kanan pada body lagi, melainkan berada pada paling kanan dari parentnya. Berarti posisinya akan berada di tengah-tengah.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Float (Text Wrapping)</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
border: 3px solid rgb(0, 0, 0);
width: 550px;
box-sizing: border-box;
margin: 10px auto 0;
}
img{
width: 220px;
height: 130px;
margin: 10px 5px 0 5px;
}
p{
padding: 0 5px 10px;
}
</style>
</head>
<body>
<div class="main">
<img src="Logo.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
</body>
</html>
Ganti Logo.jpg dengan gambar yang kalian miliki. Jika selesai coba save lalu lihat hasilnya. Akan tampil gambar beserta teks di bawahnya dengan memiliki border hitam jenis solid berukuran 3px yang berada di posisi tengah. Beberapa properti yang digunakan tadi sudah dibahas pada materi Box Model semoga kalian masih ingat.
Pada contoh di atas, tampilannya masih normal-normal saja. Posisi teks masih berada di bawah gambar. Untuk melihat perbedaannya seperti pada penjelasan di awal tadi, silahkan beri float dengan nilai left pada elemen atau tag <img>. Save lalu lihat hasilnya. Sekarang posisi dari teks menjadi mengelilingi gambar. Alasannya seperti yang sudah dijelaskan tadi, teks akan mengisi ruang kosong yang ada di atasnya.
Ada kasus menarik yang harus dipahami pada float. Kita akan mengambil contoh menggunakan kode di atas tadi. Coba kalian hapus teks di atas, sisakan sekitar 15 kata. Jangan hapus float left yang sudah diberikan pada elemen atau tag <img> tadi. Save lalu lihat hasilnya. Tampilannya menjadi kurang lebih seperti di bawah ini.
Fungsi Clear.
Cara mengatasinya adalah gunakan properti untuk menghentikan float yaitu Clear. Clear mempunyai 3 nilai yaitu right, left dan both. Nilai right digunakan untuk menghentikan float right, nilai left digunakan untuk menghentikan float left, sedangkan nilai both digunakan untuk menghentikan keduanya yaitu right dan left. Penulisan kodenya seperti di bawah ini.
clear: right;
clear: left;
clear: both;
Cara Menggunakan Clear.
Ada 2 cara penggunaan properti clear untuk menghentikan float dengan benar.
- Menggunakan <div> kosong.
- Menggunakan teknik Micro Clearfix.
Pertama, kita akan coba menggunakan <div> kosong. Caranya adalah dengan membuat <div> kosong lalu letakkan di bawah elemen yang ingin dihentikan floatnya. Jika kita ambil contoh menggunakan kode di atas tadi, maka hasilnya akan seperti di bawah ini.
<div class="main">
<img src="Logo.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="clear"></div>
</div>
Di atas ada <div> kosong yang posisinya terletak di bawah tag <p>. Kenapa diletakkan di situ? Karena kita ingin menghentikan floatnya setelah tag <p> atau teks. Jika <div> kosongnya diletakkan sebelum tag <p>, maka seolah percuma memberikan properti float pada tag <img> karena tepat di bawahnya langsung dihentikan. Otomatis floatnya hilang dan teksnya berada di bawah gambar persis seperti belum diberi float. Mengenai hal ini saya kira wajib diperhatikan. Kebanyakan orang salah pada penempatan dari <div> kosong tadi.
Selanjutnya jika penempatan <div> kosongnya sudah selesai, tinggal kita beri properti clear pada <div> tersebut. Panggil <div> nya menggunakan selector class lalu nama classnya karena berhubung <div> kosong tadi sudah mempunyai class. Beri properti clear dengan nilai left karena float yang ingin dihapus memiliki nilai left. Contoh penulisannya seperti di bawah ini.
.clear{
clear: left;
}
Coba save lalu lihat hasilnya. Sekarang parentnya akan menganggap image ada sehingga terbukti border dari si parent kembali mengelilinginya.
Cara kedua adalah menggunakan teknik Micro Clearfix. Ada yang mengatakan bahwa menggunakan metode clear dengan <div> kosong kurang efektif. Karena membuat kodingannya terkesan kurang rapi. Yakni kita membuat sebuah <div> yang kurang bermakna karena hanya digunakan untuk membersihkan float. Cara yang lebih lebih baik adalah menggunakan teknik Micro Clearfix ini.
Teknik Micro Clearfix ini diciptakan oleh Nicolas Gallagher. Kalian bisa mengcopy script atau kodenya dengan mengunjungi situs resmi dari pembuatnya. Atau sudah saya copykan di bawah ini.
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
Cara penggunannya gampang sekali. Tinggal tambahkan class cf ke parent dari elemen yang diberi float tadi. Otomatis floatnya akan dibersihkan. Jadi tidak perlu repot-repot menambah elemen HTML lagi. Contoh penulisan kodenya seperti di bawah ini.
<div class="main cf">
<img src="Logo.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Demikian penjelasan mengenai Float Pada CSS Layouting ini. Kita akan lanjut lagi pembahasannya pada part 4 yaitu mengenai Position. Semoga kalian bisa paham mengenai dua materi yang sudah kita bahas bersama di part-part sebelumnya sehingga bisa lanjut belajar mengenai CSS Position nanti.
