フロントエンドインタビューBFC

BFCとは

BFC(Block Formatting Context):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>

块元素外边距折叠问题

2つのブロック要素の外側マージンは20pxであることがわかります。

この問題を解決するためにBFCを使用できます。2つの要素を別々の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クリアフロート

デモデモ:

<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清除浮动

通常のドキュメントストリーム要素がフローティング要素によって上書きされないようにする

デモデモ:

<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解决元素被浮动元素覆盖问题

適応2列レイアウト

デモデモ:

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

元のリンク