Fungsi Property Float pada CSS

Pada tutorial kali ini kita akan membahas tentang fungsi property float pada CSS. Maksud dari fungsi ini adalah untuk menempatkan elemen pada bilah sisi halaman website, yakni sisi kanan atau sisi kiri dari halaman website tersebut. Property yang digunakan untuk mengatur bilah sisi ini adalah property float itu sendiri, dan nilai propertynya 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

Apabila saya tidak menempatkan script :

div{float: left;}

maka elemen akan berbaris secara vertical karena bilah sisinya tidak di atur.

float pada css

Terkadang ada masalah dimana terjadi penumpukan elemen saat menggunakan konsep floating elemen. Silahkan salin lebih dulu kode sumber di bawah untuk melihat hasilnya :

Dan di bawah ini adalah hasil dari kode sumber di atas :

floating pada css

Dari kode sumber di atas kita ingin agar box berada di atas paragraph, namun tetap di bilah sisi kiri. Seperti gambar di bawah ini :

cara float elemen pada css

CSS menyediakan property untuk membersihkan efek dari bilah sisi ini dengan menggunakan property clear: both. Dengan begitu efek dari bilah sisi ini akan hilang. Namun anda harus meletakkan property clear: both setelah elemen yang memiliki aturan bilah sisi tersebut. Berikut kode sumbernya.

Di atas saya tambahkan script

Setelah.

Dan hasilnya akan sesuai dengan gambar terakhir. Semoga bermanfaat.


Demikian tutorial dari fungsi property float pada CSS. Silahkan kunjungi artikel lainnya dari materi CSS pada website ini Combinators, Box Model, List.

Leave a comment

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

One thought on “Fungsi Property Float pada CSS”

× Contact Us