CSS中有多少種清除浮動的方法？哪種更常用？

方式一：使用overflow屬性來清除浮動

方式二：使用額外標簽法

.clear{
　　clear:both;
}

在浮動的盒子之下再放一個標簽，在這個標簽中使用clear:both，來清除浮動對頁面的影響.

內(nèi)部標簽：會將這個浮動盒子的父盒子高度重新?lián)伍_.

外部標簽：會將這個浮動盒子的影響清除，但是不會撐開父盒子.

注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標簽，造成結構的混亂.

方法三:使用偽元素來清除浮動(after意思:后來,以后)

.clearfix:after{
　　content:"";//設置內(nèi)容為空
　　height:0;//高度為0
　　line-height:0;//行高為0
　　display:block;//將文本轉(zhuǎn)為塊級元素
　　visibility:hidden;//將元素隱藏
　　clear:both//清除浮動
}
.clearfix{
　　zoom:1;為了兼容IE
}

方法四:使用雙偽元素清除浮動

.clearfix:before,.clearfix:after {
　　content: "";
　　display: block;
　　clear: both;
}
.clearfix {
　　zoom: 1;
 }

總結:第一種方法會將超出部分隱藏在某些時候我們想清除浮動并且保留超出部分時做不到,第二種方法會增加許多不必要的標簽,

所以我們盡量使用第三種方法來清除浮動,為什么不選擇第四種方法呢?因為第四種是第三種的改良版雖然比較簡便,但是不嚴謹!

頁面布局的排列規(guī)則是什么？怎樣清除浮動標簽？

有序列表標簽的基本屬性簡介【前端web文章】

nav標簽怎么用？nav標簽的有什么作用？

nav標簽怎么用？nav標簽的有什么作用？

黑馬程序員web前端與移動開發(fā)培訓