CSS Floating

Dengan CSS float, sebuah elemen dapat didorong ke kiri atau kanan , yang memungkinkan unsur-unsur lain untuk masuk disekitarnya. Float sangat sering digunakan untuk gambar , tetapi juga berguna ketika bekerja dengan layout.



Elemen Float

Elemen float horizontal, ini berarti bahwa elemen hanya dapat melayang kiri atau kanan, tidak naik atau turun. Sebuah elemen float akan bergerak sejauh ke kiri atau ke kanan.  


img
{
  float: right;
}


Jika anda menempatkan beberapa elemen mengambang setelah elemen lain, mereka akan mengapung di samping satu sama lain jika ada ruang. Di sini kami telah membuat sebuah galeri gambar menggunakan properti float:


. thumbnail
{
float: left ;
width: 110px ;
height : 90px ;
margin: 5px ;
}


Mematikan Float - Menggunakan Clear

Elemen mengambang akan mengalir di sekitarnya. Untuk menghindari hal ini , gunakan properti clear. Properti clear menentukan mana sisi elemen elemen apung lainnya tidak diperbolehkan. Tambahkan sebuah baris teks ke dalam galeri gambar , menggunakan properti clear:


.text_line
{
clear: both;
}


CSS float Properti 

Kolom "CSS" menunjukkan di mana versi CSS properti didefinisikan (CSS1 atau CSS2).

PropertyDescriptionValuesCSS
clearMenentukan sisi elemen di mana unsur-unsur yang terapung lainnya tidak diperbolehkanleft
right
both
none
inherit
1
floatMenentukan apakah iya atau tidak sebuah kotak harus mengapungleft
right
none
inherit
1
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda