前端BFC佈局學習

天月發表於2019-02-16
前端

BFC，全稱為(Block formatting context)。按照我的理解是我們在某一條件下會觸發BFC佈局，會產生一定的效果。

Block Formatting Contexts翻譯為：塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行佈局，以及與其他元素的關係和相互作用。

其中塊級元素可以理解為父級元素，內容即是子元素，子元素也為塊元素，其他元素指的是與內容同級別的兄弟元素，相互作用指的是BFC裡的元素與外面的元素不會發生影響。

而觸發BFC的條件是：

1、float的值不為none
2、overflow的值不為visible
3、display的值為table-cell、table-caption和inline-block之一
4、position的值不為static或者releative中任何一個

普通文件流的佈局規則(一般像我這種新手沒有佈局意識的，就應該是普通文件流佈局了。。。)

1、浮動的元素是不會被父級計算高度
2、非浮動元素會覆蓋浮動元素的位置
3、margin會傳遞給父級
4、兩個相鄰的元素上下margin會重疊

BFC的佈局規則

1、浮動的元素會被父級計算高度(父級觸發了BFC)
2、非浮動元素不會覆蓋浮動元素的位置（非浮動元素觸發了BFC）
3、margin不會傳遞給父級（父級觸發了BFC）
4、兩個相鄰的元素上下margin不會重疊（給其中一個元素新增一個單獨的父級，然後讓他的父級觸發了BFC）

例項：

<!--html程式碼
BFC滿足條件：display:inline-block;
所以會遵循BFC的佈局規則，使得其浮動元素會被父級計算高度，從而也就避免了高度塌陷。
-->
<div style="border: 1px solid #f00; display: inline-block;">
    <div style="width: 100px; height: 100px; background: green; float: left;"></div>
</div>
 <!--
BFC滿足條件：overflow:hidden；兄弟元素之間不會相互覆蓋
-->
<div style="border: 1px solid #f00; margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; float: left;">hello1</div>
    <div style="width: 100px; height: 100px; background: red; overflow: hidden;">helloagain</div>
</div>
 <!--
    BFC滿足條件：overflow:hidden；使得父級元素與子集元素margin不會重疊
-->
<div style="background: blue; margin-top: 100px; overflow: hidden;">
    <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">hello1</div>
    <div style="width: 100px; height: 100px; background: red;">helloagain</div>
</div>

<!--
    BFC滿足條件：overflow:hidden；使得父級元素與子集元素margin不會重疊，以及同級元素的margin不會重疊
-->
<div style="margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">hello1</div>
    <div style="overflow: hidden;">
        <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">helloagain</div>
    </div>
</div>

相關文章