Selain properti position di css, ada properti lain untuk mengatur layout yaitu float
.
Float
adalah properti css untuk mengatur bagaimana elemen html itu “melayang” atau ditempatkan.
Saya agak sulit mengartikannya dalam bahasa indonesia. hehehe
float
biasanya digunakan untuk mengatur elemen html di dalam konten. Berbeda dengan position yang lebih general dan bisa tidak saling terkait dengan elemen lain, kalau float
setiap perubahannya bisa berimbas pada posisi elemen lainnya.
Value Float
Ada empat value dalam float
, yaitu:
left
posisinya di sebelah kiriright
posisinya di sebelah kanannone
tidak ada posisi pasti (default dari sananya)inherit
mengikuti element induknya
Yang biasa dipakai adalah left
dan right
. Biar tidak bingung, saya kasih contoh sebelum dan sesudah saya beri float
.
Sebelum float
:
<style type="text/css"> #box{ width: 100%; height: 75px; border: 1px solid black; background: #E8F3ED; } .box_kiri{ width: 40%; height: 100%; border: 1px solid black; background: #A0CFB5; margin: 10px; } .box_kanan{ width: 40%; height: 100%; border: 1px solid black; background: #51B67F; margin: 10px; } </style> <div style="height: 80px"> <div id="box"> <div class="box_kiri">konten kiri</div> <div class="box_kanan">konten kanan</div> </div> </div>
Hasilnya adalah:
Kita beri float untuk .box_kiri
dan .box_kanan
, kode css menjadi:
.box_kiri{ width: 40%; height: 100%; border: 1px solid black; background: #A0CFB5; margin: 10px; float: left } .box_kanan{ width: 40%; height: 100%; border: 1px solid black; background: #51B67F; margin: 10px; float: right; }
Hasilnya:
Value Clear
clear
digunakan untuk membersihkan atau menetralkan atau menghapus property float
yang ada di elemen lain. Supaya tidak ngefek ke elemen yang sedang digunakan.
Valuenya:
left
menghapusfloat
dengan valueleft
right
menghapusfloat
dengan valueright
none
tidak menghapus apa-apainherit
mengikuti element induknyaboth
menghapusfloat
dengan valueleft
danright
Biar tidak bingung lihat contoh berikut:
<!DOCTYPE html> <html> <head> <title>Belajar Link HTML CSS</title> <style type="text/css"> .div1 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; padding:5px; } .div2 { border: 1px solid red; padding:5px; } .div3 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; padding:5px; } .div4 { border: 1px solid red; clear: left; padding:5px; } .div5 { float: right; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; padding:5px; } .div6 { border: 1px solid red; clear: right; padding:5px; } .div7 { border: 1px solid red; clear: both; padding:5px; } </style> </head> <body> <p>Tanpa clear</p> <div class="div1">div1 float left</div> <div class="div2">div2 - posisinya ada di setelah div1 yang memiliki float <code>left</code>. Karena tidak diberi clear, makannya div2 masih kena efeknya dari div1</div> <br><br> <p>Ditambah clear left</p> <div class="div3">div3 float left</div> <div class="div4">div4 diberi clear left. Makannya div 4 akan otomatis turun untuk "menetralkan" float dari div 3</div> <p>Ditambah clear right</p> <div class="div5">div5 float right</div> <div class="div6">div6 diberi clear right. Makannya div 6 akan otomatis turun untuk "menetralkan" float dari div 5</div> <p>Ditambah clear both</p> <div class="div5">div5 float right</div> <div class="div7">div7 diberi clear both. Jadi semua efek float akan dihapus</div> </body> </html>
Efeknya adalah:
Tanpa clear
left
. Karena tidak diberi clear, makannya div2 masih kena efeknya dari div1Ditambah clear left
Ditambah clear right
Ditambah clear both
Sekian tutorial cara mengatur float dan clear css. Kalau masih bingung, coba terus saja, ganti valuenya supaya tahu efeknya gimana.