BFC全稱block formatting context 才写，中文名塊級(jí)格式化上下文嚼松，bfc的表現(xiàn)原則是如果一個(gè)元素具有BFC,那么內(nèi)部子元素翻江倒海皮获，都不會(huì)影響外部元素乓梨∩辏—— 張?chǎng)涡瘛禼ss世界》
觸發(fā)BFC
官方文檔: Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
翻譯下
<html>根元素
float的值不為none
overflow的值為auto遣疯、scroll或hidden
display的值為table-cell、table-caption和inline-block中的任何一個(gè)
-
position的值不為relative和static
那么BFC有什么特性呢?
- 在一個(gè)BFC當(dāng)中颠黎，內(nèi)部的Box會(huì)在垂直方向另锋，從頂部開(kāi)始一個(gè)接一個(gè)地放置；
- Box垂直方向的距離由margin決定狭归，屬于同一個(gè)BFC上下文的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加夭坪；
- 在BFC上下文中，每個(gè)盒子的左外側(cè)緊貼包含塊的左側(cè)（從右到左的格式里过椎，則為盒子右外側(cè)緊貼包含塊右側(cè)）室梅，甚至有浮動(dòng)也是如此（盡管盒子里的行盒子Line Box可能由于浮動(dòng)而變窄），除非盒子創(chuàng)建了一個(gè)新的BFC（在這種情況下盒子本身可能由于浮動(dòng)而變窄）疚宇。
BFC的作用
如果兩個(gè)相鄰box 處于同一個(gè)bfc亡鼠，那么這兩個(gè)box會(huì)出現(xiàn)外邊距合并的情況
http://js.jirengu.com/desiw/1/edit?html,css,output
這時(shí)，可以利用bfc來(lái)解決外邊距合并敷待，我們可以創(chuàng)造一個(gè)新的BFC,利用了display：inline-block可以利用BFC來(lái)實(shí)現(xiàn)兩欄布局
http://js.jirengu.com/rosuc/1/edit?html,css,output
通過(guò)設(shè)置main 的overflow: hidden解決了父元素塌陷的問(wèn)題间涵。當(dāng)子元素都浮動(dòng)后，父元素會(huì)出現(xiàn)包不住子元素的情況榜揖。這是我們通過(guò)設(shè)置overflow: hidden勾哩，生成一個(gè)BFC，讓子元素在父元素內(nèi)举哟。
(http://js.jirengu.com/cufem/1/edit)
