bfc的布局規則：
1內部的box會在垂直方向，乙個接乙個地放置
2box垂直愛方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
3每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從左往右的格式化，否則相反）。即使存在浮動也是如此。
4bfc的區域不會與float box重疊
5bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6計算bfc的高度時，浮動元素也參與計算。
哪些元素會生成bfc,觸發bfc的方法:
1根元素
2float屬性不為none
3position為absolute或fixed
4display為inline-block,table-cell,table-caption,flex,inline-flex
5overflow不為visible
BFC的觸發條件
bfc block formatting context 塊級格式化上下文，從字面的意思真的很難理解，我特別喜歡張鑫旭的 css世界的結界 的叫法，非常的形象生動，看過火影的同學都知道，非常厲害的忍術都會形成結界，形成乙個封閉的空間，裡面的人出不來，外面的人進不去，bfc就是如此。下面是bfc觸發的...
高度塌陷的解決方法以及如何觸發BFC
解決高度塌陷 hack1 給父元素新增宣告overflow hidden 觸發乙個bfc hack2 在浮動元素下方新增空div,並給該元素新增宣告 divhack3 萬能清除浮動法選擇符 after ie8及以下無效 觸發bfc float屬性不為none position為absolute或fi...
盒模型 bug 與觸發 bfc
一 margin合併 css經典bug 兩個塊級元素 分別設定 margin bottom 和 margin top 並不能達到預期效果 上面 的最終效果 中間的距離 並不是margin top margin bottom 而是 兩者 中取大的那個 的值 就像 合併到了一 解決方法 給 up 和 d...