Ringkasan Kaedah Biasa untuk Mengosongkan Terapung dalam CSS_Experience Exchange

Terdapat tiga kaedah yang biasa digunakan untuk membersihkan terapung.
Ini ialah kod sumber terapung yang belum dikosongkan Latar belakang kuning muda unsur induk tidak dapat dilihat semasa menjalankan kod.                                                                                   

Kiri <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Betul<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Ctrl+A Pilih semua Nota:
Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ] 1. Terapung jelas dengan label kosong. Kaedah yang saya gunakan untuk masa yang lama ialah tag kosong boleh menjadi tag div atau tag P. Saya sudah biasa menggunakan

, yang cukup pendek, dan ramai orang juga menggunakan

---

. Mereka hanya perlu mengosongkan sempadan untuknya, tetapi secara teori ia boleh menjadi sebarang label. Kaedah ini adalah untuk menambah teg sedemikian untuk mengosongkan terapung selepas semua elemen terapung di dalam elemen induk terapung perlu dikosongkan dan mentakrifkan kod CSS untuknya: clear:both. Kelemahan pendekatan ini ialah ia menambah elemen struktur yang tidak bermakna.

Kiri <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clr{clear:both;} --> </style>Betul<div id="layout"> <div id="left"></div> <div id="right"> </div> <p class="clr"></p> </div> [Ctrl+A Pilih semua Nota:
Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ] 2. Gunakan atribut limpahan. Kaedah ini berkesan menyelesaikan keburukan perlu menambah kod yang tidak disengajakan dengan mengosongkan terapung melalui elemen label kosong. Untuk menggunakan kaedah ini, anda hanya perlu mentakrifkan sifat CSS: overflow:auto dalam elemen yang perlu dibersihkan daripada terapung, dan itu sahaja! "zoom:1" adalah untuk keserasian dengan IE6.

Kiri <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Betul<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Ctrl+A Pilih semua Nota:
Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ] 3. Gunakan objek pseudo selepas untuk terapung dengan jelas. Kaedah ini hanya terpakai kepada pelayar bukan IE. Sila rujuk contoh berikut untuk kaedah penulisan tertentu. Sila beri perhatian kepada perkara berikut semasa penggunaan. 1. Dalam kaedah ini, ketinggian:0 mesti ditetapkan untuk objek pseudo yang perlu mengosongkan elemen terapung, jika tidak, elemen akan menjadi beberapa piksel lebih tinggi daripada nilai sebenar 2. Atribut kandungan adalah perlu, tetapi nilainya boleh kosong, perbincangan ideal biru Dalam kaedah ini, nilai atribut kandungan ditetapkan kepada ".", tetapi saya mendapati ia juga mungkin untuk membiarkannya kosong.

Kiri <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>Betul<div id="layout"> <div id="left"> <br><input onclick="runEx('runcode74943')" type="button" value="运行代码"> <input onclick="doCopy('runcode74943')" type="button" value="复制代码"> <input onclick="doSave(runcode74943)" type="button" value="保存代码">[Ctrl+A Pilih semua Nota: <a href="/article/23421.htm" title="查看具体详情" target="_blank">Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan </a>]</div> <br> <br> Ketiga-tiga ini Setiap kaedah mempunyai kelemahan tertentu, dan anda harus memilih yang terbaik apabila menggunakannya Sebagai perbandingan, kaedah kedua lebih diutamakan. Kaedah-kaedah di atas adalah bukan asal dan semuanya bersumberkan daripada Internet Ia disusun di sini.</div>