浮動對頁面的影響：
如果一個(gè)父盒子中有一個(gè)子盒子饰豺，并且父盒子沒有設(shè)置高晦闰，子盒子在父盒子中進(jìn)行了浮動，那么將來父盒子的高度為0.由于父盒子的高度為0吻贿，
下面的元素會自動補(bǔ)位串结，所以這個(gè)時(shí)候要進(jìn)行浮動的清除。
關(guān)于清除浮動的方式:
- 方式一:使用overflow屬性來清除浮動
overflow:hidden;
先找到浮動盒子的父元素舅列，再在父元素中添加一個(gè)屬性：overflow:hidden,就是清除這個(gè)父元素中的子元素浮動對頁面的影響.
注意：一般情況下也不會使用這種方式肌割，因?yàn)閛verflow:hidden有一個(gè)特點(diǎn)，離開了這個(gè)元素所在的區(qū)域以后會被隱藏（overflow:hidden會將超出的部分隱藏起來）.
或者 overflow:auto
優(yōu)點(diǎn)：簡單帐要，代碼少把敞，瀏覽器支持好
缺點(diǎn): 內(nèi)部寬高超過父級div時(shí)，會出現(xiàn)滾動條
- 方式二:使用額外標(biāo)簽法
.clear{
clear:both;
}
在浮動的盒子之下再放一個(gè)標(biāo)簽榨惠，在這個(gè)標(biāo)簽中使用clear:both奋早，來清除浮動對頁面的影響.
a.內(nèi)部標(biāo)簽：會將這個(gè)浮動盒子的父盒子高度重新?lián)伍_.
b.外部標(biāo)簽：會將這個(gè)浮動盒子的影響清除盛霎，但是不會撐開父盒子.
注意：一般情況下不會使用這一種方式來清除浮動。因?yàn)檫@種清除浮動的方式會增加頁面的標(biāo)簽耽装，造成結(jié)構(gòu)的混亂.
- 方法三:使用偽元素來清除浮動(after意思:后來,以后)
.clearfix:after{
content:"";//設(shè)置內(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;
??????? }
總結(jié):第一種方法會將超出部分隱藏在某些時(shí)候我們想清除浮動并且保留超出部分時(shí)做不到,第二種方法會增加許多不必要的標(biāo)簽,
所以我們盡量使用第三種方法來清除浮動,為什么不選擇第四種方法呢?因?yàn)榈谒姆N是第三種的改良版雖然比較簡便,但是不嚴(yán)謹(jǐn)愤炸。
BFC
w3c 規(guī)范中的 BFC 定義
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline- blocks, table-cells掉奄，和 table- captions）规个，以及 overflow 值不為 visiable'的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）姓建。
在 BFC 中诞仓，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直的間隙是由他們的 margin 值所決定的速兔。在一個(gè) BFC 中墅拭，兩個(gè)相部的塊級盒子的垂直外邊距會產(chǎn)生折疊。
在 BFC 中憨栽，每一個(gè)盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left)（對于從右到左的格式來說帜矾，則觸碰到右邊緣）翼虫。
BFC 的通俗理解：
首先 BFC 是一個(gè)名詞屑柔，是一個(gè)獨(dú)立的布局環(huán)境，我們可以理解為一個(gè)箱子（實(shí)際上是看不見 摸不著的）珍剑，箱子里面物品的擺放是不受外界的影響的掸宛。轉(zhuǎn)換為 BFC 的理解則是：BFC 中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個(gè) BFC 中招拙，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列唧瘾。
BFC的觸發(fā)條件 (任意一條):
float的值不為none
overflow的值不為visible
display的值為table-cell、tabble-caption和inline-block之一
position的值不為static或則releative中的任何一個(gè)
BFC的布局規(guī)則
內(nèi)部元素會在垂直方向一個(gè)接一個(gè)排列别凤，可以理解為BFC中的一個(gè)常規(guī)流饰序。
元素垂直方向上，同一個(gè)BFC的兩個(gè)相鄰盒子的margin會發(fā)生重疊
BFC區(qū)域不會與float元素區(qū)域重疊
計(jì)算BFC的高度规哪，浮動子元素也會參與計(jì)算
BFC的子元素不會影響到外面的元素
優(yōu)點(diǎn):不存在結(jié)構(gòu)和語義化問題求豫，代碼量極少缺點(diǎn):可能存在不換行導(dǎo)致超出內(nèi)容不可見.無法顯示溢出元素
詳細(xì)參見
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
