Latest web development tutorials

CSS float (floating)

Apa itu CSS mengambang (float)?



The Float CSS (floating), elemen akan bergerak ke kiri atau kanan, unsur-unsur di sekitarnya akan diatur kembali.

Mengambang (floating), sering digunakan untuk gambar, tapi sangat berguna ketika tata letak yang sama.


Bagaimana floating elemen

unsur mengambang horisontal, berarti bahwa elemen hanya bisa bergerak kiri dan kanan dan tidak bisa bergerak ke atas dan ke bawah.

Unsur mengambang akan mencoba untuk bergerak kiri atau kanan sampai tepi luar melintasi perbatasan atau mengambang kotak yang berisi kotak lain sejauh ini.

Elemen setelah elemen mengambang akan fokus pada itu.

Elemen sebelum elemen mengambang tidak akan terpengaruh.

Jika gambar mengambang yang tepat, teks berikut akan mengalir di sisi kiri itu:

contoh

img
{
float:right;
}

Coba »


Mengambang elemen berdekatan satu sama lain

Jika Anda menempatkan beberapa elemen mengambang disatukan, jika ada ruang, maka akan berdekatan satu sama lain.

Di sini, kita menggunakan galeri mengambang gambar properti:

contoh

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

Coba »


Jelas mengambang - Gunakan jelas

Setelah elemen mengambang di sekitar elemen ulang, untuk menghindari ini, menggunakan properti yang jelas.

Atribut jelas menentukan elemen tidak dapat muncul di kedua sisi elemen mengambang.

Menggunakan properti teks yang jelas untuk menambahkan galeri foto:

contoh

.text_line
{
clear:both;
}

Coba »


contoh

contoh yang lebih

Gambar kiri menambahkan perbatasan dan margin dan mengapung ke paragraf

Mari kita menambahkan perbatasan gambar dan margin dan ayat float ke kiri

Judul dan gambar ke float yang tepat

Biarkan judul dan gambar ke float yang tepat.

Biarkan huruf pertama dari float ayat ke kiri

Mengubah gaya sehingga huruf pertama dari float ayat ke kiri.

Tidak membuat halaman dengan meja

Gunakan pelampung untuk membuat halaman header, footer, konten kiri dan konten utama.


Semua properti CSS mengapung

"CSS" kolom menunjukkan jumlah versi yang berbeda dari CSS (CSS1 atau CSS2) mendefinisikan properti.

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1