前端面試之BFC

什麼是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清除浮動

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。

解決方法:

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

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

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;
}
複製代碼

自適應兩欄佈局

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

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）。

複製代碼