这是我参与「第四届青训营」笔记创作活动的第5天

一、触发BFC的方式：

1、overflow:hidden

2、dispaly:inline-block

3、Display:table-cell

4、Display:flex

5、Position:absolute

6、Position:fixed

二、关于bfc：

1、BFC是一个块级元素，相邻的BFC元素之间会在垂直方向一个接一个的排列；

<style>
    .box {
        margin: 10px;
        width: 100px;
        height: 100px;
        background: rgb(0, 0, 0);
    }
    .container {
        display: flex;
        flex-direction: column;
    }
    div {
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }
</style>
<body>
    <!-- 我是第一个BFC元素-->
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <!--我是第二个BFC元素-->
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

如图：两个红框分别是两个BFC容器，它们在垂直方向一个接一个的排列

2、BFC可以看作是页面中一个隔离的独立容器，容器内外的标签互不影响；

应用场景：两个连续的块级元素本应该是“两栏”布局，但其中一个元素使用了‘float：left’脱离文档流，影响了另外一个元素

<style>
    div {
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }
</style>
<body>
    <div style="float: left;">
        例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二例二
    </div>
    <div style="width: 300px;display: flex;">
        我要不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响
    </div>
</body>

解决： 为受影响的元素添加BFC，使其不受脱离文档流的元素影响

图片1.png

<div style="width: 300px;display: flex;">
    我要不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响不受影响
</div>

3、垂直方向的距离由margin决定，属于同一个BFC的两标签外边距（margin）不会发生重叠；

应用场景：同一个父元素中的两个连续块级元素的Margin外边距发生重叠，只取了最大的margin，而不是两个元素的margin之和

图片2.png

<style>
.box {
    margin: 10px;
    width: 100px;
    height: 100px;
    background: rgb(0, 0, 0);
}
</style>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

解决：给父元素加BFC

.container {
    display: flex;
    flex-direction: column;
}

图片3.png

图片4.png

4、计算BFC高度时，浮动元素也会参与计算；

应用场景： 子元素使用‘float’脱离文档流，导致父元素高度塌陷

如图：父元素的背景颜色未出现，即，父元素高度塌陷了。

图片5.png

<style>
.box {
    margin: 10px;
    width: 100px;
    height: 100px;
    background: rgb(0, 0, 0);
    float: left;
}
.container {
    background-color: rgb(247, 154, 154);
}
</style>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

解决：给父元素加BFC

<style>
.container {
    background-color: rgb(247, 154, 154);
    display: flex;
}
</style>

图片6.png

父元素背景颜色成功出现~

三、总结：

问：什么时候，为谁加bfc：

答曰：遇到元素样式无法正常显示时，为该元素加bfc

比如父元素高度塌陷，那就为父元素添加bfc；margin外边距重叠，那就为父元素添加bfc；某元素受脱离文档流的元素影响，那就为该元素添加bfc，诸如此类。。。

BFC｜ 青训营笔记

一、触发BFC的方式：

二、关于bfc：

三、总结：

BFC｜青训营笔记