Floating CSS
- Hal Sebelumnya Pengaturan Lokasi Absolut CSS
- Hal Berikutnya Pemilihan Elemen CSS
Kotak floating dapat bergerak ke arah kiri atau kanan, hingga luar tekanan mereka menabrak bingkai kotak yang berisi atau bingkai kotak floating lainnya.
Karena kotak floating tidak berada di alur normal dokumen, jadi blok blok di alur normal dokumen bertindak seperti jika kotak floating tidak ada.
Floating CSS
Lihat gambar di bawah, saat kotak 1 bergerak ke arah kanan, ia lepas dari alur dokumen dan bergerak ke arah kanan, hingga ujung kanan ia menabrak ujung kanan kotak yang berisi:
Lihat gambar di bawah, saat kotak 1 bergerak ke arah kiri, ia lepas dari alur dokumen dan bergerak ke arah kiri, hingga ujung kiri ia menabrak ujung kiri kotak yang berisi. Karena ia tidak lagi berada di alur dokumen, ia tidak mengambil ruang, sebenarnya menutupi kotak 2, sehingga kotak 2 menghilang dari penglihatan.
Jika semua tiga kotak di gerakkan ke arah kiri, kotak 1 bergerak ke arah kiri hingga menabrak kotak yang berisi, sementara dua kotak lainnya bergerak ke arah kiri hingga menabrak kotak floating sebelumnya.
Sebagaimana terlihat di gambar di bawah, jika kotak yang berisi terlalu sempit untuk menampung tiga elemen floating yang berada di baris horizontal, maka blok floating lainnya akan bergerak ke bawah hingga terdapat ruang yang cukup. Jika tinggi elemen floating berbeda, saat mereka bergerak ke bawah mereka mungkin 'diblokir' oleh elemen floating lainnya:
Properti float CSS
Dalam CSS, kita melaksanakan floating elemen melalui properti float.
Untuk mendapatkan pengetahuan lebih lanjut tentang properti float, kunjungi buku referensi:Properti float CSS。
Garis kotak dan penghapus
Garis kotak disamping kotak mengambang disingkatkan, sehingga memberikan ruang bagi kotak mengambang, garis kotak mengelilingi kotak mengambang.
Oleh karena itu, membuat kotak mengambang dapat membuat teks mengelilingi gambar:
Untuk menghentikan garis kotak bergerak disekitar kotak yang mengambang, perlu menerapkan kotak itu Atribut clear. Atribut clear dapat berisi nilai left, right, both, atau none, yang menunjukkan sisi mana dari kotak yang tidak harus mendekati kotak floating.
Untuk mencapai efek ini, di elemen yang dicleaning,Margin atasTambahkan ruang yang cukup di atas untuk membuat bagian atas elemen turun vertikal ke bawah floating box:
Ini adalah alat yang berguna, yang membuat elemen di sekeliling memberi ruang bagi elemen floating.
Biarkan kami lihat lebih detil tentang floating dan cleaning. Sayangnya, jika ingin menggantung gambar ke kiri dari blok teks, dan ingin gambar dan teks berada di dalam elemen lain yang memiliki warna latar dan border, Anda mungkin menulis kode di bawah ini:
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Dalam kasus ini, muncul masalah. Karena elemen floating keluar dari alur dokumen, div yang melingkapi gambar dan teks tidak mengambil ruang.
Bagaimana agar elemen yang melingkapi dapat melingkapi elemen floating secara visual? Perlu mengaplikasikan clear di tempat yang mana saja di elemen ini:
Sayangnya, muncul masalah baru, karena tidak ada elemen yang dapat diterapkan cleaning, jadi kami hanya dapat menambah elemen kosong dan cleaningnya.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
Dengan cara ini, kami akan mendapatkan efek yang diinginkan, tetapi perlu menambah kode yang berlebihan. Kadang-kadang ada elemen yang dapat diterapkan clear, tetapi kadang-kadang harus menambah tanda yang tidak berarti untuk melakukan layout.
Namun, kami masih memiliki cara lain, yaitu melakukan floating terhadap div kontainer:
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Dengan cara ini, kami akan mendapatkan efek yang diinginkan. Sayangnya, elemen berikutnya akan terpengaruh oleh elemen gantung ini. Untuk menyelesaikan masalah ini, beberapa orang memilih untuk menggantung semua benda di layout, kemudian menggunakan elemen yang berarti yang sesuai (biasanya footer situs) untuk cleaning yang menggantung.
Fakta, semua halaman situs CodeW3C.com menggunakan teknologi ini, jika Anda membuka berkas CSS yang kami gunakan, Anda akan melihat kami melakukan cleaning terhadap div footer, dan tiga div di atas footer menggantung ke arah kiri.
Properti clear CSS
Kami baru saja mendiskusikan secara detil prinsip kerja CSS cleaning dan metode aplikasi atribut clear. Jika Anda ingin belajar lebih banyak tentang atribut clear, silakan kunjungi referensi:Properti clear CSS。
Contoh floating dan penghapus
- Pemakaian sederhana properti float
- Membuat gambar floating di sisi kanan paragraf
- Membuat gambar dengan garis dan batas floating di sisi kanan paragraf
- Membuat gambar floating di sisi kanan paragraf. Tambahkan garis dan batas ke gambar.
- Gambar dengan judul floating di sisi kanan
- Membuat gambar dengan judul floating di sisi kanan
- Membuat awalan paragraf floating di sisi kiri
- Membuat awalan paragraf floating di sisi kiri dan menambahkan gaya ke huruf ini.
- Membuat menu horisontal
- Membuat menu horisontal dengan floating yang memiliki tautan dalam satu baris.
- Membuat halaman utama tanpa tabel
- Membuat halaman utama dengan judul, kaki halaman, daftar referensi kiri dan konten utama.
- Penghapus elemen sisi
- Contoh ini menunjukkan bagaimana menggunakan elemen penghapus untuk menghapus elemen floating di sisi elemen lain.
- Hal Sebelumnya Pengaturan Lokasi Absolut CSS
- Hal Berikutnya Pemilihan Elemen CSS
