Ba la la la ~ 讀者朋友驼唱，你們好啊，又到了冷鋒時間凸郑，話不多說裳食，發(fā)車！
二芙沥、如何產(chǎn)生BFC：
當(dāng)一個HTML元素滿足下面條件的任何一點(diǎn)诲祸，都可以產(chǎn)生Block FormattingContext：float的值不為none。
overflow的值不為visible而昨。
display的值為table-cell, table-caption, inline-block中的任何一個救氯。
position的值不為relative和static。
三歌憨、BFC能用來做什么着憨？
a、不和浮動元素重疊
如果一個浮動元素后面跟著一個非浮動的元素务嫡，那么就會產(chǎn)生一個覆蓋的現(xiàn)象甲抖，很多自適應(yīng)的兩欄布局就是這么做的。
b心铃、清除元素內(nèi)部浮動
只要把父元素設(shè)為BFC就可以清理子元素的浮動了准谚，最常見的用法就是父元素上設(shè)置overflow: hidden樣式，對于IE6加上zoom:1就可以了(IE Haslayout)去扣。
根據(jù)CSS2.1規(guī)范第10.6.3 部分的高度計(jì)算規(guī)則柱衔，在進(jìn)行普通流中的塊級非替換元素的高度計(jì)算時，浮動子元素不參與計(jì)算厅篓。同時CSS2.1規(guī)范第10.6.7部分的高度計(jì)算規(guī)則秀存，在計(jì)算生成了
block formatting context的元素的高度時，其浮動子元素應(yīng)該參與計(jì)算羽氮。
所以或链，觸發(fā)外部容器BFC，高度將重新計(jì)算档押。比如給outer加上屬性overflow:hidden觸發(fā)其BFC澳盐。
c、解決上下相鄰兩個元素重疊
根據(jù)CSS 2.1 8.3.1 Collapsing margins 第一條令宿，兩個相鄰的普通流中的塊框在垂直位置的空白邊會發(fā)生折疊現(xiàn)象叼耙。也就是于同一個BFC中的兩個垂直窗口的margin會重疊。
根據(jù)CSS 2.1 8.3.1 Collapsing margins 第三條粒没，生成block formatting context的元素不會和在流中的子元素發(fā)生空白邊折疊筛婉。所以解決這種問題的辦法是要為兩個容器添加具有BFC的包裹容器。
所以解這個問題的辦法就是,把兩個容器分別放在兩個據(jù)有BFC的包裹容器中癞松，IE里就是觸發(fā)layout的兩個包裹容器中爽撒！
以上為個人意見入蛆，如有雷同，純屬巧合硕勿，歡迎大家多提意見哨毁！Bey 了 個 Bey ~
