1. 為什么要清除浮動
因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標準流盒子，
2. 清除浮動的方法
（1）額外標簽法
在浮動元素末尾添加一個空的標簽例如：
<div style="clear:both"></div>
（2）父級添加overflow屬性
可以給父級添加overflow屬性為hidden或auto或scroll：
.Father {
overflow: hidden;
/* overflow: auto; */
/* overflow: scroll; */
}
（3）父級使用after偽元素
.Father:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7 專有 */
.Father {
*zoom: 1;
}
（4）父級使用雙偽元素
.Father:before,
.Father:after {
content: "";
display: table;
}
.Father:after {
clear: both;
}
.Father {
*zoom: 1;
}
3. 總結
| 清除浮動的方式 | 優點 | 缺點 |
|---|---|---|
| 額外標簽法 | 通俗易懂，書寫方便 | 添加許多無意義的標簽，結構化較差 |
| 父級添加overflow屬性 | 書寫簡單 | 溢位隱藏 |
| 父級使用after偽元素 | 結構語意化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級使用雙偽元素 | 結構語意化正確 | 由于IE6-7不支持:after，兼容性問題 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/213922.html
標籤：其他
上一篇：網路程式設計復習