CSS float Properti
Contoh
Biarkan gambar melayang ke kanan:
img
{
float: right;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti float
menentukan apakah suatu elemen harus melayang ke kiri, kanan, atau tidak sama sekali.
Catatan: Elemen yang diposisikan sepenuhnya mengabaikan float
properti!
Catatan: Elemen di sebelah elemen mengambang akan mengalir di sekitarnya. Untuk menghindarinya, gunakan properti clear atau hack clearfix (lihat contoh di bagian bawah halaman ini).
Nilai bawaan: | tidak ada |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS1 |
Sintaks JavaScript: | objek .style.cssFloat="kiri" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Sintaks CSS
float: none|left|right|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Biarkan gambar melayang ke kiri:
img
{
float: left;
}
Contoh
Biarkan gambar ditampilkan tepat di tempat kemunculannya dalam teks (float: none):
img
{
float: none;
}
Contoh
Biarkan huruf pertama dari sebuah paragraf melayang ke kiri dan gaya hurufnya:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Contoh
Gunakan float dengan daftar hyperlink untuk membuat menu horizontal:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Contoh
Gunakan float untuk membuat beranda dengan header, footer, konten kiri, dan konten utama:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Contoh
Jangan izinkan elemen mengambang di sisi kiri atau kanan elemen <p> tertentu:
img {
float: left;
}
p.clear {
clear: both;
}
Contoh
Jika elemen mengambang lebih tinggi dari elemen yang mengandung, itu akan meluap di luar wadahnya. Dimungkinkan untuk memperbaikinya dengan "peretasan clearfix":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Halaman Terkait
Tutorial CSS: Float CSS
Referensi DOM HTML: properti cssFloat