1.在bfc中，盒子從頂端開始垂直地乙個接乙個地排列.
2.盒子垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰盒子的margin會發生重疊
3.在bfc中，每乙個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。
① bfc的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
②計算bfc的高度時，自然也會檢測浮動或者定位的盒子高度。
1. 清除元素內部浮動
只要把父元素設為bfc就可以清理子元素的浮動了。
最常見的用法：在父元素上設定overflow: hidden樣式，對於ie6加上zoom:1。
主要用到：計算bfc的高度時，自然也會檢測浮動或者定位的盒子高度。
2. 解決外邊距合併問題
建立不屬於同乙個bfc，就不會發生margin重疊了。
方法：將上方的子盒子用乙個盒子套起來，加上overflow: hidden;
這樣原來的兩個子盒子的margin就不會重疊了。
主要用到：盒子垂直方向的距離由margin決定，屬於同乙個bfc的兩個相鄰盒子的margin會發生重疊。
3. 製作右側自適應的盒子問題
方法：給乙個子盒子加overflow: hidden; 使得該盒子緊貼浮動盒子邊緣。
主要用到：普通流體元素bfc後，為了和浮動元素不產生任何交集，順著浮動邊緣形成自己的封閉上下文。bfc的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...
BFC塊級格式化上下文
塊格式化上下文 block formatting context，bfc 是web頁面的可視css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域。根元素 浮動元素 元素的 float 不是 none 絕對定位元素 元素的 position 為 absolute 或 fi...