Fungsi Property Float pada CSS

Dalam tutorial ini kita akan mempelajari fungsi property float pada CSS. Jadi fungsi float itu sendiri adalah untuk menempatkan elemen pada bilah sisi halaman website, yakni sisi kanan halaman web atau pada sisi kiri halaman web. Nilai dari property float yang umum digunakan pun adalah right atau left.

Sekarang silahkan tulis kode di bawah ini :

Maka output dari kode sumber di atas akan membuat elemen sebaris dari kiri ke kanan.

Fungsi Property Float pada CSS

Namun, apabila saya tidak menempatkan script :

div{float: left;}

Maka elemen akan membuat baris baru dibawahnya alias tidak akan sejajar dengan elemen disampingnya. Hal ini terjadi karena elemen yang saya gunakan adalah elemen <div>. Dan elemen <div> sendiri merupakan kategori block elemen, yakni elemen yang akan membuat baris baru dibawahnya.

float pada css

Terkadang ada masalah dimana terjadi penumpukan elemen saat menggunakan konsep floating elemen. Dimana elemen disampingnya juga ikut terkena dampak dari property float. Nah solusi agar elemen lain ini tidak terkena dampaknya adalah dengan menggunakan property clear.

Property clear sendiri sebenarnya memiliki 5 nilai, yakni none, left, right, both, dan inherit. Namun kita gunakan nilai both saja untuk membersikah floating left dan juga right.

Sekarang saya akan membuat mencoba untuk membuat elemen kotak yang saya letakkan pada sisi kanan dari halaman website, oleh karena itu silahkan ketik dulu source code di bawah ini untuk melihat hasilnya :

Dan di bawah ini adalah hasil dari source code di atas :

floating pada css

Dari gambar di atas paragraf – paragraf yang ada disamping box biru terkena efek dari floating box biru tersebut. Oleh karena itu agar paragraf – paragrafnya pindah ke bawah, kita harus membersihkan efek dari floating ini. Sekarang setelah code :

kita tambahkan code :

untuk membersihkan efeknya. Sehingga apabila dijalankan kembali maka outputnya adalah seperti ini :

cara float elemen pada css


Demikian tutorial dari fungsi property float pada CSS. Silahkan kunjungi artikel lainnya dari materi CSS pada website ini pengertian combinators pada css, atau pengertian konsep box model pada css.

Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Fungsi Property Float pada CSS”

× Contact Us