http://www.reibang.com/p/09bd5873bed4這篇寫的也挺好mark稻艰。
浮動(dòng)對(duì)頁(yè)面的影響：
如果一個(gè)父盒子中有一個(gè)子盒子，并且父盒子沒有設(shè)置高锋边，子盒子在父盒子中進(jìn)行了浮動(dòng)皱坛，那么將來(lái)父盒子的高度為0.由于父盒子的高度為0，
下面的元素會(huì)自動(dòng)補(bǔ)位豆巨，所以這個(gè)時(shí)候要進(jìn)行浮動(dòng)的清除剩辟。
關(guān)于清除浮動(dòng)的方式:
方式一:使用overflow屬性來(lái)清除浮動(dòng)
.ovh{
overflow:hidden;
}
先找到浮動(dòng)盒子的父元素，再在父元素中添加一個(gè)屬性：overflow:hidden,就是清除這個(gè)父元素中的子元素浮動(dòng)對(duì)頁(yè)面的影響.
注意：一般情況下也不會(huì)使用這種方式往扔，因?yàn)閛verflow:hidden有一個(gè)特點(diǎn)贩猎，離開了這個(gè)元素所在的區(qū)域以后會(huì)被隱藏（overflow:hidden會(huì)將超出的部分隱藏起來(lái)）.
方式二:使用額外標(biāo)簽法
.clear{
clear:both;
}
在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both萍膛，來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響.
a.內(nèi)部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的父盒子高度重新?lián)伍_.
b.外部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的影響清除吭服，但是不會(huì)撐開父盒子.
注意：一般情況下不會(huì)使用這一種方式來(lái)清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽蝗罗，造成結(jié)構(gòu)的混亂.
方法三:使用偽元素來(lái)清除浮動(dòng)(after意思:后來(lái),以后)
.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)簽,
所以我們盡量使用第三種方法來(lái)清除浮動(dòng),為什么不選擇第四種方法呢?因?yàn)榈谒姆N是第三種的改良版雖然比較簡(jiǎn)便,但是不嚴(yán)謹(jǐn)
