1、（block formatting contexts）bfc 定義
bfc(block formatting context)直譯為"塊級格式化上下文"。它是乙個獨立的渲染區域，只有block-level box參與， 它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。
2、bfc布局規則：
內部的box會在垂直方向，乙個接乙個地放置。
box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
bfc的區域不會與float box重疊。
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
計算bfc的高度時，浮動元素也參與計算
3、哪些元素會生成bfc:
根元素float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
1、haslayout：
『layout』 是 ie 的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其他元素的關係和相互作用，以及對應用還有使用者的影響。。
當乙個元素的 『haslayout』 屬性值為 true 時，我們說這個元素擁有了乙個布局（layout），即成功觸發haslayout
預設擁有布局的元素：
, , , ,
, , , , ,
可觸發 haslayout 的 css 特性：
display: inline-block /*all*/
height: (除 auto 外任何值) /*僅適用ie6 7*/
width: (除 auto 外任何值) /*僅適用ie6 7*/
float: (left 或 right) /*all*/
position: absolute /*all*/
writing-mode: tb-rl /*all*/
zoom: (除 normal 外任意值) /*僅適用ie6 7*/
ie7 還有一些額外的屬性(不完全列表)可以觸發haslayout ：
min-height: (任意值)/*以下適用ie7+*/
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，僅用於塊級元素)
overflow-x: (除 visible 外任意值，僅用於塊級元素)
overflow-y: (除 visible 外任意值，僅用於塊級元素)
position: fixed
總結：
1、layout是 ie 的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其他元素的關係和相互作用，以及對應用還有使用者的影響。
2、bfc就是乙個不讓內部元素與外界相互影響，包容浮動子元素，並自身和外界的浮動盒子不重疊的盒子。
3、tips:我們有時會用overflow:hidden的方法去清除浮動，就是因為觸發了元素的塊格式化上下文(ie6 7要申明zoom為1)
4、 ie有它自己的haslayout屬性，那麼非ie瀏覽器呢？非ie瀏覽器採用的就是bfc（塊格式化上下文）
5.haslayout的原理 ie 瀏覽器中，觸發 haslayout 的元素在進行高度計算的時候，其浮動的子元素也會參與運算。
談談煩人的hasLayout和BFC
在你的瀏覽器上編寫乙個小demo left right parent left child right child 好了，你會發現黑色的parent並沒有顯示出來。浮動元素的父容器並沒有被撐開，都是因為bfc和haslayout 有一點要說明，ie6 7中是沒有bfc的，而haslayout卻是ie...
高度塌陷與 BFC
在浮動布局中，父元素的高度預設是被子元素撐開的 當子元素浮動後，其會完全脫離文件流，子元素從文件流中脫離將會無法撐起父元素的高度，導致父元素的高度丟失 父元素高度丟失以後，其下的元素會自動上移，導致頁面的布局混亂 clear作用 清除浮動元素對當前元素所產生的影響 本質是為元素新增乙個margin ...
css複習 浮動與BFC
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。浮動的值 left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。...