CSS Float Property berhubungan dengan pengaturan posisi sebuah obyek secara horizontal. Penggunaan css float property bukan hanya sekedar untuk kepentingan pengaturan posisi obyek/elemen saja, namun akan berkaitan dengan elemen lain disekitarnya. Penggunaan css float property selalu dibarengi dengan properti margin yang berfungsi untuk mengatur jarak obyek dengan elemen lain termasuk teks. Akan sangat berguna untuk penataan image/gambar dan elemen lain dalam desain blog/web maupun penataan halaman posting. Dalam penggunaanya, nilai yang banyak dimanfaatkan untuk pengaturan dan penataan blog/web adalah float:left dan float:right, sekalipun masih ada 2 nilai css float property yang lain (float:none dan float:inherit). Anda bisa melihat fungsi dan kegunaan css float propertypada "gambar monyet" di samping. CSS float property membuat gambar monyet berada di sebelah kanan halaman, sedangkan margin menciptakan jarak antara "gambar monyet" dengan teks disisi sebelah kiri dan bawahnya. CSS float property tersebut juga membuat teks naik sejajar dengan ujung teratas gambar. Hal seperti ini hanya dapat terjadi melalui penggunaan css float property. Anda akan melihat perbedaan ini melalui demo yang ditampilkan ujung terbawah posting.
Posisi pengaturan melalui css float property
Ada empat pengaturan yang dapat dilakukan dengan css float property.- float:left; Untuk membuat elemen berada disisi sebelah kiri.
- float:right; Untuk membuat elemen berada disisi sebelah kanan.
- float:none; Elemen berada disisi sebelah kiri namun menghasilkan penataan ruang berbeda dengan float:left atau float:right
- float:inherit; Hasilnya hampir sama dengan float:none
Clear Property dan CSS Float Property
Properti css "clear" sangat erat hubungannya dengan css float property. Agar elemen lain berada tepat di bawah obyek yang menggunakan css float property harus ditambahkan "clear:both" di bawahnya. Bentuk kodenya sbb:<div style="clear:both"></div> atau
<br style="clear:both" />
Contoh penggunaan css float property pada image berikut margin
<style type="text/css">
img{
float:left;
margin:0 15px 5px 0;
}
img{
float:right;
margin:0 0 5px 15px;
}
img.kiri{
float:left;
margin:0 15px 5px 0;
}
img.kanan{
float:right;
margin:0 0 5px 15px;
}
</style>
<img class="kiri" src="image.jpg" alt="image di sebelah kiri" />
<img class="kanan" src="image.jpg" alt="image di di sebelah kanan"/>
Menggunakan css float property, margin & attribute style dalam xHTML
<img src="image.jpg" width="200" height="200" style="float:left;margin:0 15px 5px 0;" alt="image di sebelah kiri" /> <img src="image.jpg" width="200" height="200" style="float:right;margin:0 0 5px 15px;" alt="image di sebelah kanan" />
Informasi tambahan tentang margin
margin:0 15px 5px 0;kode css di atas identik dengan:
margin: TOP | RIGHT | BOTTOM | LEFT;
Demo di bawah ini mengungkapkan betapa pentingnya penggunaan css float property dalam pengaturan posisi obyek (sebagai contoh berupa image). Penggunaan css float property juga mengharuskan digunakannya vss property margin dan dalam beberapa kasus mengharuskan penggunaan css property clear.
Please click the button to display. Continue with editing code and click to see the results!
Post : CSS Float Propertyby : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot
manteppp
BalasHapustrimakasih langsung di praktekin dan berhasil
BalasHapusijin mencontoh script nya mas :D
BalasHapusdan ijin copy paste script nya juga mas :)
terimakasih...
salam kenal ari.