好買網 goodmai。com IT技術交易 平臺
1.BFC含義?
BFC
全稱:
Block Formatting Contexts
塊級元素格式化上下文
-
-
不同型別的 Box,會參與不同的 Formatting Context(決定如何渲染文件的容器)
-
BFC內部的元素和外部的元素不會互相影響~~?
2.BFC觸發條件?
滿足以下條件之一就可觸發BFC
- 根元素
-
float 的值不為 none
-
overflow 的值不為 visible
-
display 的值為 inline-block、table-cell、table-caption
-
position 的值為 absolute 或 fixed
3.BFC佈局規則?
- 浮動的元素會被父級計算高度(父級觸發了BFC)
- 非浮動元素不會覆蓋浮動元素位置(非浮動元素觸發了BFC)
- margin不會傳遞給父級(父級觸發了BFC)
- 屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊
- BFC 是頁面上的一個 隔離的獨立容器 ,容器裡面的子元素不會影響到外面的元素
- 計算 BFC 的高度時,浮動元素也會參與計算
- BFC 的區域不會與 float box 重疊
3.BFC作用?
◾ 1)自適應兩欄佈局
◾ 2)可以阻止元素被浮動元素覆蓋
◾ 3)可以清除內部浮動
◾ 4)可以阻止 margin重疊
BFC在前端頁面佈局中十分常見也灰常重要~
本文來自部落格園,作者: 不知名前端李小白,轉載請註明原文連結: https://www.cnblogs.com/libo-web/p/15457210.html