Cara yang sangat mudah untuk menutup elemen terapung_CSS/HTML

Petua kecil yang sangat bagus yang saya lihat secara tidak sengaja Ini tentang menggunakan CSS untuk mengendalikan elemen terapung tertutup anda tahu lebih lanjut mengenainya, lihat blog old9. Terdapat artikel tentang menutup elemen terapung.

Kaedah kegemaran saya ialah menggunakan kelas pseudo :selepas untuk membenamkan elemen secara dinamik untuk mengosongkan elemen terapung Malangnya, jumlah kod terlalu besar dan ia tidak kelihatan cukup ringkas. Sekarang saya melihat ada kaedah yang sangat mudah. Biar saya perkenalkan dengan cepat. Teks asal ada di:
http://annevankesteren.nl/2005/03/clearing-floats
Prinsipnya ialah ini Sebab mengapa elemen persisian tidak dapat dilanjutkan dengan baik ialah limpahan . dihidupkan, kerana limpahan tidak kelihatan. Lihat penjelasan W3C

Kandungan petikan:

Selain itu, jika unsur itu mempunyai sebarang keturunan terapung yang tepi margin bawahnya berada di bawah bahagian bawah, maka ketinggian dinaikkan untuk memasukkan tepi tersebut Hanya terapung yang merupakan anak kepada unsur itu sendiri atau keturunan dalam aliran biasa yang diambil mengambil kira, cth., terapung di dalam keturunan yang diposisikan secara mutlak atau apungan lain tidak.

Sekarang hanya tambah limpahan:auto pada elemen persisian untuk menyelesaikan masalah itu, kecuali untuk IE, ia boleh diselesaikan. Masalah IE akan diselesaikan seterusnya.

Berikut ialah tiga contoh yang saya buat sebagai perbandingan

1.
Tiada unsur terapung tertutup
2.Elemen terapung tertutup di bawah bukan IE
3.Elemen tertutup sepenuhnya

<p> </p>Apungan pembersihan yang sangat mudah<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- body{ font:.9em/150% Verdana, Arial, Helvetica, sans-serif normal warna:#333333;} h1{ latar belakang:#f5f5f5; em{ color:#f60; font-style:normal;} kod{ display:block; font-family:"Courier New", Courier, monospace:1px #ccc dotted:10px; <title>#wrap_three{ sempadan:6px #ccc pepejal; .column_left{ float:left; width:20%; .column_right{ float:right; width:75%; padding-left:6px #eee padu; --> </style> <style type="text/css"> <!-- body{ font:.9em/150% Verdana, Arial, Helvetica, sans-serif normal; color:#333333;} h1{ background:#f5f5f5; padding:6px;} em{ color:#f60; font-style:normal;} code{ display:block; font-family:"Courier New", Courier, monospace; border:1px #ccc dotted; padding:10px;} <P>#wrap_three{ border:6px #ccc solid; overflow:auto;_height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;} <P>--> </style> <p> </p> <div id="wrap_three"> <div class="column_left">Apung ke kiri<h1> </h1>Lapisan ini terapung ke kiri<p> </p> <code>.column_left{ float:left; width:20%; padding:10px;}</code> </div> <div class="column_right">Apung kanan<h1> </h1>Lapisan ini terapung ke kanan. Di bawah ialah CSS lengkap Ini ialah aplikasi lapisan periferal dengan <p>overflow:auto;<em>tambah </em>_height:1%;<em> model apungan tertutup. Bekas periferi boleh dipanjangkan secara normal. IE6.0, Firefox 1.5 dan Opera 9.0 semuanya lulus ujian. </em> </p> <code> #wrap_three{ border:6px #ccc solid; overflow:auto; _height:1%;} .column_left{ float:left; width:20%; padding:10px;} .column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}</code> </div> </div>