前端面試之BFC

小諾哥發表於2019-02-20
前端面試

什麼是BFC

BFC(塊格式化上下文): 是Web頁面視覺化渲染CSS的一部分, 是佈局過程中生成塊級盒子的區域。也是浮動元素與其他元素的互動限定區域。

簡單理解就是具備BFC特性的元素, 就像被一個容器所包裹, 容器內的元素在佈局上不會影響外面的元素。

BFC常見應用

解決普通文件流塊元素的外邊距摺疊問題

 <style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo div {
        width: 40px;
        height: 40px;
    }
    .demo1 {
        margin: 10px 0;
        background: pink;
    }
    .demo2 {
        margin: 20px 0;
        background: blue;
    }
</style>
<div class="demo">
    <div class="demo1"></div>
    <div class="demo2"></div>
</div>
複製程式碼

塊元素外邊距摺疊問題

可見兩個塊元素外邊距為20px。

我們可以使用BFC來解決這個問題,只需要把兩個元素置於不同的BFC中進行隔離。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo {
        overflow: hidden;
    }
    .demo div {
        width: 40px;
        height: 40px;
    }
    .demo1 {
        margin: 10px 0;
        background: pink;
    }
    .demo2 {
        margin: 20px 0;
        background: blue;
    }
</style>

<div class="demo">
    <div class="demo1"></div>
</div>
<div class="demo">
    <div class="demo2"></div>
</div>
複製程式碼

BFC

BFC清除浮動

demo演示:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo {
        border: 1px solid pink;
    }
    .demo p {
        float: left;
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>

<div class="demo">
    <p></p>
</div>
複製程式碼

可見容器元素內子元素浮動,脫離文件流,容器元素高度只有2px。

BFC清除浮動

解決方法:

.demo {
    border: 1px solid pink;
    overflow: hidden;
}
複製程式碼

BFC清除浮動

阻止普通文件流元素被浮動元素覆蓋

demo演示:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .demo1 {
        width: 100px;
        height: 100px;
        float: left;
        background: pink
    }
    .demo2 {
        width: 200px;
        height: 200px;
        background: blue;
    }
</style>

<div class="demo">
    <div class="demo1">我是一個左側浮動元素</div>
    <div class="demo2">我是一個沒有設定浮動, 也沒有觸發BFC的元素</div>
</div>
複製程式碼

demo2部分割槽域被浮動元素demo1覆蓋, 但是文字沒有覆蓋, 即文字環繞效果。

元素被浮動元素覆蓋

解決辦法就是觸發demo2的BFC。

.demo2 {
    width: 200px;
    height: 200px;
    background: blue;
    overflow: hidden;
}
複製程式碼

BFC解決元素被浮動元素覆蓋問題

自適應兩欄佈局

demo演示:

<style>
* {
    margin: 0;
    padding: 0;
}
.container {
}
.float {
    width: 200px;
    height: 100px;
    float: left;
    background: red;
    opacity: 0.3;
}

.main {
    background: green;
    height: 100px;
    overflow: hidden;
}
</style>

<div class="container">
    <div class="float">
        浮動元素
    </div>
    <div class="main">
        自適應
    </div>
</div>
複製程式碼

BFC實現兩欄佈局

如何觸發BFC

1. 根元素或包含根元素的元素
2. 浮動元素（元素的 float 不是 none）
3. 絕對定位元素（元素的 position 為 absolute 或 fixed）
4. 行內塊元素（元素的 display 為 inline-block）
5. 表格單元格（元素的 display為 table-cell，HTML表格單元格預設為該值）
6. 表格標題（元素的 display 為 table-caption，HTML表格標題預設為該值）
7. 匿名錶格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的預設屬性）或 inline-table）
8. overflow 值不為 visible 的塊元素
9. display 值為 flow-root 的元素
10. contain 值為 layout、content或 strict 的元素
11. 彈性元素（display為 flex 或 inline-flex元素的直接子元素）
12. 網格元素（display為 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
14. column-span 為 all 的元素始終會建立一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）。

複製程式碼

相關文章