Atur ketinggian untuk elemen induk sebelumnya. Catatan: Dalam pengembangan perusahaan, jangan menulis ketinggian jika Anda bisa melakukannya.
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clearfloat </iteme> <tyle> .smallbox1 {width: 100px; Tinggi: 100px; Latar Belakang: Merah; Boder: 3px Solid Black; margin: 5px; float: right;} .smallbox2 {width: 100px; Tinggi: 100px; Latar Belakang: Merah; Boder: 3px Solid Black; margin: 5px;} .smallbox3 {width: 100px; Latar Belakang: Merah; Boder: 3px Solid Black; margin: 5px;} .smallbox3 {width: 100px; Tinggi: 100px; Latar Belakang: Merah; Boder: 3px Solid Black; margin: 5px;} .smallbox4 {width: 100px; Tinggi: 100px; Latar Belakang: Merah; Boder: 3px Solid Black; margin: 5px;} .smallbox5 {lebar: 100px; Tinggi: 100px; Latar Belakang: Merah; Boder: 3px Solid Black; margin: 5px;} .smallbox6 {lebar: 100px; Tinggi: 100px; Latar Belakang: Merah; Tubuh: 3px Solid Black; margin: 5px;} .bigbox1, .bigbox2 { /*lebar: 400px;* / /*lebar: 400px;* / latar belakang-warna: hijau; Perbatasan: 3px Black Solid; } </tyle> </head> <body> <v class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> <v class = smallbox3> </div> </div> <v class = bigbox2> <v class = smallbox4> </div> <v class = smallbox5> </div> div> smallbox = small2> </div> <v class = smallbox5> </div> div> div class = smallbox4> </div> <v class = Smallbox = SmallBox5> </Div> Div class = smallbox4> </Div Class = Smallbox = SmallBox5> </Div Class = SmAL class = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2. Cara kedua untuk membersihkan floatTambahkan atribut yang jelas ke atribut berikut
Atribut yang jelas mengambil nilai:
None: Nilai default diambil, diurutkan sesuai dengan aturan penyortiran elemen mengambang (mengapung kiri untuk menemukan float kiri, float kanan untuk menemukan float kanan)
Kiri: Jangan mencari elemen mengambang kiri di depan
Kanan: Jangan mencari elemen mengambang yang tepat di depan
Keduanya: Jangan mencari elemen mengambang dan mengambang di depan
Sebagai contoh: kami tidak mengatur lebar dan tinggi kotak besar, kotak kecil akan mendukung kotak besar, tetapi dua kotak besar akan berada pada baris karena ini.
.smallbox1 {width: 100px; Tinggi: 100px; float: kiri; Latar Belakang: Merah; Perbatasan: 2px Solid Black; } .smallbox2 {width: 100px; Tinggi: 100px; float: kiri; Latar Belakang: Merah; Perbatasan: 2px Solid Black; } .smallbox3 {width: 100px; Tinggi: 100px; float: kiri; Latar Belakang: Biru; Perbatasan: 2px Solid Black; } .smallbox4 {width: 100px; Tinggi: 100px; float: kiri; Latar Belakang: Biru; Perbatasan: 2px Solid Black; } </tyle> </head> <body> <v class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <v class = smallbox3> </div> <v class = smallbox4> </div> </div> </body>Kami menggunakan atribut yang jelas pada kotak kecil ketiga, sehingga kami dapat memulai baris baru (yang keempat tidak diperlukan, karena kami ingin yang ketiga berada di sebelah yang keempat), dan kami hanya membutuhkan kode kotak kecil ketiga untuk memodifikasi kode.
.smallbox3 {clear: left; Lebar: 100px; Tinggi: 100px; float: kiri; Latar Belakang: Biru; Perbatasan: 2px Solid Black; }Catatan: Atribut margin telah kedaluwarsa, dan kami akan berbicara tentang metode yang tidak kedaluwarsa lain kali.
3. Kode Sumber:D131_clearfloat.html
D132_clearattribute.html
alamat:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
MeringkaskanDi atas adalah dua cara untuk membersihkan HTML mengambang yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!
Jika Anda pikir artikel ini bermanfaat bagi Anda, silakan cetak ulang. Harap tunjukkan sumbernya, terima kasih!