什么是BFC
- 對(duì)于浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（inline-block,table-cells,table-captions）,以及overflow不為visible的塊級(jí)盒子邀杏，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）
BFC的特點(diǎn)
- 在BFC中衫嵌，盒子從頂端垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直地間隙是由他們的margin所決定鲜侥，在一個(gè)BFC中兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生折疊漂坏。
- 在BFC中每個(gè)盒子的左外邊緣會(huì)觸碰到容器的左邊緣
如何形成BFC
(1)float值不為none.(2)overflow的值不為visble.(3)display的值為“table-cell”,“table-caption”,or“inline-block”中的任何一個(gè).(4)position的值不為“static”或“relative”中的任何一個(gè).
BFC的作用
-
自適應(yīng)兩欄布局
Paste_Image.png -
清楚內(nèi)部浮動(dòng)
Paste_Image.png
Paste_Image.png
Paste_Image.png
BFC的應(yīng)用
-
我們看如下代碼:
HTML:<div class="box">  <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p> </div>
CSS：
.box {
width:300px;
height:300px;
}
.box img {
float:left;
width:100px;
height:50px;
}
查看預(yù)覽效果：
Paste_Image.png
這并沒(méi)有達(dá)到我們的目的，文字圍繞圖片谓罗。因?yàn)槲淖质艿搅烁?dòng)元素的影響粱哼。要達(dá)到我們想要的目的，我們得給p元素的內(nèi)容建立一個(gè)BFC檩咱。讓它的內(nèi)容消除對(duì)外界浮動(dòng)元素的影響揭措。
.box p {
overflow:hidden;
}
查看預(yù)覽結(jié)果：
Paste_Image.png
邊距合并
(1)在什么場(chǎng)景下會(huì)發(fā)生邊距合并
- 兩個(gè)相鄰元素，第一個(gè)元素的下邊距與第二個(gè)元素的上邊距刻蚯，發(fā)生邊距合并绊含。
Paste_Image.png
- 父子外邊距，當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)）炊汹，它們的上和/或下外邊距也會(huì)發(fā)生合并.
Paste_Image.png
-
假設(shè)有一個(gè)空元素躬充，它有外邊距，但是沒(méi)有邊框或填充讨便。在這種情況下充甚，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并.
Paste_Image.png
