BFC的概念
BFC全稱Block Formatting Context ，直譯“塊級格式化上下文”，也有譯作“塊級格式化范圍”。它是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。通俗的講，就是一個div內部，我們用float和margin布局元素。

BFC布局規則：
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算

創建一個BFC
一個BFC可以被顯式的觸發。如果想要創建一個新的BFC，只需要給它添加上面提到的任何一個CSS樣式就可以了。
例如，請看下面的 HTML ：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表