關於清除浮動的五種方法
阿新 • • 發佈:2018-11-09
清除浮動的本質:為了解決父級元素印子級浮動引起內部高度為0的問題。
方式1:額外標籤法(w3c推薦的方法): 在最後一個浮動標籤後,新新增一個標籤
優點:通俗易懂,書寫方便。
缺點:不推薦使用,新增許多無意義的標籤,結構化較差。
.clear{
clear:both;
width:0;
height:0;
}
方式2:父級新增overflow屬性方法
.father{
overflow:hidden;
}
優點:程式碼簡捷。
缺點:內容增多時容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢位的元素。
方法3:為父元素新增after偽元素清除浮動
.clearfix:after{
content:"";//設定內容為空
height:0;//高度為0
display:block;//將文字轉為塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動
}
.clearfix{
*zoom:1;//zoom:1 就是IE6清除浮動的方式,* ie7以下的版本所識別
}
優點:符合閉合浮動思想,結構語義化正確。
缺點:由於IE6-7不支援:after,使用zoom:1觸發hasLayout。
方法4:為父元素新增before和after雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
優點:程式碼更簡潔
缺點:由於IE6-7不支援:after,使用zoom:1觸發hasLayout。
方法5:為父元素設定具體的寬和高的值
.father{
height:100px;//計算具體的值
width:100%;
}
優點:通俗易懂,書寫方便。
缺點:不推薦使用,需要計算準確地值,且容易出現偏差。