Saat menggunakan tata letak halaman web DivCSS, float sering digunakan. Banyak hal buruk yang mungkin disebabkan oleh float. Ada banyak pengenalan tentang clearing float di masa lalu. Menghapus float adalah suatu keharusan, dan menghapus float dari elemen induk kapan saja dianggap sebagai salah satu kebiasaan baik dalam menulis CSS.
Mari kita lihat tutorial hari ini. Ini adalah kode sumber mengambang yang belum dihapus. Anda tidak dapat melihat latar belakang kuning muda dari elemen induk saat menjalankan kode.
Contoh Kode Sumber
[www.downcodes.com]
*{margin:0;padding:0;}
badan{font:36px tebal; warna:#F00; perataan teks:tengah;}
#tata letak{latar belakang:#FF9;}
#kiri{float:kiri;lebar:20%;tinggi:200px;latar belakang:#DDD;tinggi garis:200px;}
#kanan{float:kanan;lebar:30%;tinggi:80px;latar belakang:#DDD;tinggi garis:80px;}
–>
Seperti yang ditunjukkan pada gambar sebelum membersihkan pelampung:
1. Gunakan label kosong untuk membersihkan pelampung Salah satu metode yang sudah lama saya gunakan adalah tag kosong dapat berupa tag div atau tag P. Saya terbiasa menggunakan
, yang cukup singkat. Banyak orang juga menggunakan
, tetapi mereka hanya perlu menghapus batasnya, tetapi secara teori bisa berupa tag apa saja. Metode ini adalah dengan menambahkan tag seperti itu untuk menghapus float setelah semua elemen mengambang di dalam elemen induk mengambang perlu dibersihkan, dan menentukan kode CSS untuk itu: clear:both. Kerugian dari pendekatan ini adalah penambahan elemen struktur yang tidak berarti.
Contoh Kode Sumber
[www.downcodes.com]
*{margin:0;padding:0;}
badan{font:36px tebal; warna:#F00; perataan teks:tengah;}
#tata letak{latar belakang:#FF9;}
#kiri{float:kiri;lebar:20%;tinggi:200px;latar belakang:#DDD;tinggi garis:200px;}
#kanan{float:kanan;lebar:30%;tinggi:80px;latar belakang:#DDD;tinggi garis:80px;}
.clr{hapus:keduanya;}
–>
Metode ini secara efektif mengatasi kerugian karena harus menambahkan kode yang tidak disengaja dengan menghapus float melalui elemen label yang kosong. Untuk menggunakan metode ini, Anda hanya perlu mendefinisikan properti CSS: overflow:auto pada elemen yang perlu dibersihkan dari floating, dan selesai! "zoom:1" adalah untuk kompatibilitas dengan IE6.
Contoh Kode Sumber
[www.downcodes.com]
*{margin:0;padding:0;}
badan{font:36px tebal; warna:#F00; perataan teks:tengah;}
#layout{latar belakang:#FF9;overflow:auto;zoom:1;}
#kiri{float:kiri;lebar:20%;tinggi:200px;latar belakang:#DDD;tinggi garis:200px;}
#kanan{float:kanan;lebar:30%;tinggi:80px;latar belakang:#DDD;tinggi garis:80px;}
–>
Metode ini hanya berlaku untuk browser non-IE. Silakan lihat contoh berikut untuk metode penulisan spesifik. Harap perhatikan hal-hal berikut saat digunakan. 1. Dalam metode ini, tinggi: 0 harus disetel untuk objek semu yang perlu menghapus elemen mengambang, jika tidak, elemen tersebut akan beberapa piksel lebih tinggi dari nilai sebenarnya 2. Atribut konten diperlukan, tetapi nilainya bisa kosong, biru diskusi ideal Dalam metode ini, nilai atribut konten disetel ke ".", tetapi menurut saya dimungkinkan juga untuk membiarkannya kosong.
Contoh Kode Sumber
[www.downcodes.com]
*{margin:0;padding:0;}
badan{font:36px tebal; warna:#F00; perataan teks:tengah;}
#tata letak{latar belakang:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#kiri{float:kiri;lebar:20%;tinggi:200px;latar belakang:#DDD;tinggi garis:200px;}
#kanan{float:kanan;lebar:30%;tinggi:80px;latar belakang:#DDD;tinggi garis:80px;}
–>
Seperti yang ditunjukkan pada gambar setelah clear floating:
Masing-masing dari ketiga metode ini memiliki kelebihan dan kekurangan, dan Anda harus memilih yang terbaik saat menggunakannya.
