BFC導讀
-
名稱
英文全稱：Block Formatting Context
中文名：塊格式化上下文
-
在了解BFC之前猖毫，先思考一個問題：
請問：什么是色情？
聯(lián)邦最高法院大法官斯圖爾特更有一句名言
I know it when I see it
我們無法定義什么是色情
不過核畴，我看了之后匀伏，就能知道它是不是
-
類似地：
- 我不知道什么是 BFC
- 但是你寫出樣式，我就知道這是不是 BFC
-
BFC 就是這樣的東西(堆疊上下文也是)
- 它沒有定義
- 它只有特性/功能
BFC的特性
-
BFC創(chuàng)建條件：
- 根元素或其它包含它的元素
- 浮動元素 (元素的
float不是none)- 絕對定位元素 (元素具有
position為absolute或fixed)- 內(nèi)聯(lián)塊 (元素具有
display: inline-block)- 表格單元格 (元素具有
display: table-cell受神，HTML表格單元格默認屬性)- 表格標題 (元素具有
display: table-caption, HTML表格標題默認屬性)- 具有
overflow且值不是visible的塊元素剖膳，display: flow-root!!無副作用!!column-span: all應(yīng)當總是會創(chuàng)建一個新的格式化上下文魏颓，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
-
BFC的特性
在一個塊格式化上下文中吱晒，盒在豎直方向一個接一個地放置甸饱，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由
margin屬性決定枕荞。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并
翻譯：
在一個BFC中柜候，子元素從BFC頂部開始，在豎直方向上一個一個地放置躏精。
兄弟元素之間豎直距離由margin屬性決定渣刷。
但是兩個豎直margin同時出現(xiàn)時，會出現(xiàn)margin合并現(xiàn)象一個塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容矗烛，除了被包含于創(chuàng)建新的塊級格式化上下文的后代元素內(nèi)的元素辅柴。
翻譯：
一個BFC包含它內(nèi)部元素的所有內(nèi)容，除了被包含于新的BFC中的元素瞭吃。
舉例：
爺爺(BFC)本來是要管家里的兒子和孫子的碌嘀。但如果兒子在(另一個BFC)的話，爺爺就不管孫子了歪架，只管兒子股冗。
BFC的功能
1. 爸爸管兒子
用 BFC 包住浮動元素
(這不是清除浮動，.clearfix 才是清除浮動）
2. 兄弟之間劃清界限
用 float + div 做左右自適應(yīng)布局
BFC面試回答
-
用代碼回答和蚪，別口頭解釋
-
就舉上面兩個例子
