面試官：談談你對 BFC 的理解？

一、是什麼

我們在頁面佈局的時候，經常出現以下情況：

歸根究底是元素之間相互的影響，導致了意料之外的情況，這裏就涉及到BFC概念

BFC（Block Formatting Context），即塊級格式化上下文，它是頁面中的一塊渲染區域，並且有一套屬於自己的渲染規則：

BFC目的是形成一個相對於外界完全獨立的空間，讓內部的子元素不會影響到外部的元素

二、觸發條件

觸發BFC的條件包含不限於：

三、應用場景

利用BFC的特性，我們將BFC應用在以下場景：

防止 margin 重疊（塌陷）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

頁面顯示如下：

兩個p元素之間的距離爲100px，發生了margin重疊（塌陷），以最大的爲準，如果第一個 P 的margin爲 80 的話，兩個 P 之間的距離還是 100，以最大的爲準。

前面講到，同一個BFC的倆個相鄰的盒子的margin會發生重疊

可以在p外面包裹一層容器，並觸發這個容器生成一個BFC，那麼兩個p就不屬於同一個BFC，則不會出現margin重疊

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

這時候，邊距則不會重疊：

清除內部浮動

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }

     .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }

</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

頁面顯示如下：

而BFC在計算高度時，浮動元素也會參與，所以我們可以觸發.par元素生活才能BFC，則內部浮動元素計算高度時候也會計算

.par {
    overflow: hidden;
}

實現效果如下：

自適應多欄佈局

這裏舉個兩欄的佈局

<style>
    body {
        width: 300px;
        position: relative;
    }

     .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }

     .main {
        height: 200px;
        background: #fcc;
    }

</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果圖如下：

前面講到，每個元素的左外邊距與包含塊的左邊界相接觸

因此，雖然.aslide爲浮動元素，但是main的左邊依然會與包含塊的左邊相接觸

而BFC的區域不會與浮動盒子重疊

所以我們可以通過觸發main生成BFC，以此適應兩欄佈局

.main {
    overflow: hidden;
}

這時候，新的BFC不會與浮動的.aside元素重疊。因此會根據包含塊的寬度，和.aside的寬度，自動變窄

效果如下：

小結

可以看到上面幾個案例，都體現了BFC實際就是頁面一個獨立的容器，裏面的子元素不影響外面的元素

參考文獻

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/4WC-1COpRL0scgPqD3I-Sg

猜你喜歡