方式一：使用overflow屬性來清除浮動(dòng)

方式二：使用額外標(biāo)簽法

.clear{
　　clear:both;
}

在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來清除浮動(dòng)對(duì)頁(yè)面的影響.

內(nèi)部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的父盒子高度重新?lián)伍_.

外部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的影響清除，但是不會(huì)撐開父盒子.

注意：一般情況下不會(huì)使用這一種方式來清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽，造成結(jié)構(gòu)的混亂.

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

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

方法四:使用雙偽元素清除浮動(dòng)

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

總結(jié):第一種方法會(huì)將超出部分隱藏在某些時(shí)候我們想清除浮動(dòng)并且保留超出部分時(shí)做不到,第二種方法會(huì)增加許多不必要的標(biāo)簽,

所以我們盡量使用第三種方法來清除浮動(dòng),為什么不選擇第四種方法呢?因?yàn)榈谒姆N是第三種的改良版雖然比較簡(jiǎn)便,但是不嚴(yán)謹(jǐn)!

頁(yè)面布局的排列規(guī)則是什么？怎樣清除浮動(dòng)標(biāo)簽？

有序列表標(biāo)簽的基本屬性簡(jiǎn)介【前端web文章】

nav標(biāo)簽怎么用？nav標(biāo)簽的有什么作用？

nav標(biāo)簽怎么用？nav標(biāo)簽的有什么作用？

黑馬程序員web前端與移動(dòng)開發(fā)培訓(xùn)