BFC - 掘金

前言：BFC是准面试题，这篇文章做了简洁、深入阐述，帮助快速复习、加深记忆。

BFC(Block formatting context)，块级格式化上下文。它是 CSS 中一种强大的布局概念，它提供了一种隔离和控制元素布局的机制。

BFC的特性

1、独立渲染区域。

具有 BFC 特性的元素拥有独立的渲染区域，可以看作是一个容器，容器内部的元素不会影响到外部容器。

<div style="width: 100%">
    <div style="width: 100px; height: 50px; float: left; background-color: red; color: #ffffff;">box1</div>
    <div style="background-color: blue; color: #ffffff;">
        box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、
        box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、
        box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2、box2
    </div>
</div>

box1 和 box2 处于不同的 BFC 中，box2 的内容不会影响到 box1 的位置。

2、边距重叠的处理。

在同一个 BFC 中，垂直相邻的子元素的边距会发生重叠，取两个边距中的最大值。

<div style="width: 100%">
    <div style="width: 50px; height: 50px; margin: 100px; background-color: red; color: #ffffff;">box1</div>
    <div style="width: 50px; height: 50px; margin: 50px; background-color: red; color: #ffffff;">box1</div>
</div>

box1 和 box2 处于同一个 BFC 中，它们的垂直边距发生了重叠，取最大值。

如果想要禁止发生重叠，可在子元素上增加父元素。

3、清除浮动。

BFC 可以用于清除浮动。在开发过程中，我们会遇到需要清除浮动的操作，而各种清除浮动的方法实质上都是基于BFC的原理。详解如下。

<div style="border: 1px solid red;">
    <div style="width: 50px;height: 50px;background: blue;float: left;"></div>
</div>

为什么会出现这种情况呢？主要是由于浮动的块状元素会脱离文档流，从而导致父元素未包裹住浮动元素。

我们可以添加 overflow: hidden 属性禁止子元素脱离父元素（超出后隐藏）。

<div style="border: 1px solid red; overflow: hidden;">
    <div style="width: 50px; height: 50px; background: blue; float: left;"></div>
</div>

BFC的布局规则

BFC 内部的子元素会在垂直方向上依次放置。
BFC 内部的两个垂直相邻的子元素边距（margin）会发生重叠，最终会取边距（margin）的最大值。
BFC 是页面上的一个隔离的独立容器，容器内部的子元素不会影响到外部的元素。
BFC 不会与已经浮动（float）的元素发生重叠。
计算 BFC 的高度时，浮动元素也会参与计算。

如何生成BFC

通过设置元素的某些属性：

float：left、right
overflow：auto、hidden
position：absolute、fixed
display：inline-block、flex、inline-flex、table-cell、table-caption

BFC的常见应用场景

清除浮动：通过创建BFC，可以解决浮动元素造成的父容器无法包裹的问题，避免布局崩塌。
解决边距重叠：在某些情况下，我们可以利用BFC特性来避免边距重叠的问题，提高布局的可控性。
制作多栏布局：利用BFC的特性，我们可以实现多栏布局，每个栏目的高度可以独立自适应，不会相互影响。
解决文字环绕问题：通过创建BFC，可以让文本环绕浮动元素或其他元素，实现更灵活的页面布局效果。