对BFC的一些理解

什么是BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

概念有点难理解，通俗易懂的解释下就是：有这样一个区域，这个区域内的元素无论设置啥样式都不会影响区域外的布局，这样一个区域就叫做BFC(Block Formatting Context)

如何触发BFC特性

• 根元素(html标签)，很好理解，页面中最大的一个区域，都没有区域外这个概念了
• 浮动元素(float:left/right)
• 绝对定位元素(position:absolute/fixed)
• overflow:auto/hidden/overlay/scroll
• display:flex/grid/table/inline-block/inline-flex/inline-grid/inline-table

使用场景

高度塌陷

在通常情况下父元素的高度会被子元素撑开，然而有时会因为子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合，这时就可以用BFC来清除浮动了

戳这里看案例，当然使用上面除了html以外的其他4个方式也是可以的

.div1 {
    width: 400px;
    background-color: rebeccapurple;
    overflow: auto;
}

.div2 {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}

<div class="div1">
    <div class="div2"></div>
</div>

margin塌陷问题

在标准文档流中，块级标签之间竖直方向的margin会以大的那个为准，这就是margin的塌陷现象

.topText {
    margin: 20px 0;
    border: 1px solid #ccc;
    width: 100px;
}

.btmText {
    margin: 20px 0;
    border: 1px solid red;
    width: 100px;
}

<div class='topText'>上方文本</div>
<div class='btmText'>下方文本</div>

// 解决方案，在topText或者btmText外面包一层div，设置overflow:auto,触发bfc特性

参考链接

BFC的作用及使用场景