学习过CSS，那你知道BFC是什么吗？

电玩女神 2022-12-17 07:27 311阅读 0赞

虽然可能你没听过BFC是什么，但是你一定用过，其是一种在CSS中存在的技术，你可能只是一直不知道有这样一个专业名词，本文就来介绍一下到底什么是BFC

>  *  公众号：**前端印象**
>  *  不定时有送书活动，记得关注~
>  *  关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

### 一起来理解BFC的作用 ###

*  一、什么是BFC
 *  二、如何触发BFC
 *  三、BFC的相关案例
 *   *  （1）清除浮动
     *  （2）margin-top塌陷
     *  （3）垂直方向的margin重叠
     *  （4）自适应布局
 *  四、结束语

# 一、什么是BFC #

首先引用一下WC3对[BFC][]的专业解释

**BFC**（Block Formatting Context）：翻译成中文叫做块级格式化上下文，它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，其提供了一个环境，元素在这个环境中按照一定的规则进行布局排列

换句话说，BFC就是为元素提供一个独立的容器，在该容器里按照一定的规则进行布局排列，该容器内的元素不会影响外部的元素，同理，外部的元素也不会影响内部的元素

# 二、如何触发BFC #

先来了解一下有哪些条件可以触发BFC：

1.  `float` 不为 `none`
2.  `position` 为 `absolute` 或 `fixed`
3.  `overflow` 不为 `visible`
4.  `display` 为 `inline-block` 或 `table` 或 `flow-root`

后续的案例中，但凡遇到需要触发BFC的，都可以按照这四个条件来使用

# 三、BFC的相关案例 #

官方的解释非常的难以理解，那么我们就用几个例子来详细了解BFC的使用

## （1）清除浮动 ##

首先来看一个例子

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>浮动</title>
        <style> .parent{ width: 350px; background-color: red; } .child{ float: left; width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: lightblue; } </style>
    </head>
    <body>
        <div class="parent">
            <div class="child1 child">1</div>
            <div class="child2 child">2</div>
            <div class="child3 child">3</div>
            <div class="child4 child">4</div>
        </div>
    </body>
    </html>

该html文档在浏览器中的样式如下图所示

![在这里插入图片描述][20201022211026370.png_x-oss-process_image]  
很明显，这是一个子元素浮动无法撑开父元素的例子

产生这种情况的原因很简单，有以下两点：

1.  父元素没有设置 `height`
2.  子元素设置了 `float` 浮动，脱离了文档流

因子元素脱离了文档流，父元素无法统计到子元素的大小，因此子元素无法将父元素撑开，所以我们就要将浮动清除

那么我们平时是如何**清除浮动**的呢？最常见的可能就是给父元素添加样式 `overflow: hidden` 了，其实这种方法就触发了BFC，在父元素内部形成了一个独立的环境，按照BFC的布局规则，该容器内的元素都会被统计到，因此浮动就被清除了

清除浮动后的效果如下图所示

![在这里插入图片描述][20201022214524360.png_x-oss-process_image]  
其实通过我们上述说到的触发BFC的条件都可以实现上述效果，这里就不做过多的展示了

既然讲到了清除浮动，我们就来看一下除了上述说到的方法，还会用到什么办法呢？

1.  在最后一个子元素后面添加一个空元素，并给予样式 `clear: both`
2.  给父元素设置一定的高度

## （2）margin-top塌陷 ##

另一个例子就是**margin-top塌陷**，如图

![在这里插入图片描述][20201024171418275.png_x-oss-process_image]  
当前子元素在父元素框内，并且上面紧贴父元素上边缘，此时我们想让子元素的上边缘与父元素的上边缘拉开一段距离，实现如下图所示的效果

![在这里插入图片描述][20201024171710916.png_x-oss-process_image]  
因此我们第一个想到的就是给子元素添加 `margin-top`，可结果却不如人意，效果如下图所示  
![在这里插入图片描述][20201024171856791.png_x-oss-process_image]  
实际效果就是，我们给子元素添加了 `margin-top`，但却是父元素整体与上一个元素拉开了距离，这就是我们常见的 **margin-top塌陷** 的问题

很明显，对子元素进行布局时影响到了其它元素的布局，因此我们可以通过给父元素添加一定的样式来触发BFC，使其内部形成一个独立的环境，这样就不会影响到其它元素的布局了

这里再做一个补充，针对 **margin-top塌陷**，我们还可以对父元素设置一个大小不为0的边框 `border`，这样也能解决问题

## （3）垂直方向的margin重叠 ##

先来看一段代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>margin重叠</title>
        <style> .parent{ width: 200px; height: 500px; background-color: red; } .child{ width: 100px; height: 100px; margin: 0 auto; line-height: 100px; text-align: center; } .child1{ margin-bottom: 20px; background-color: lightblue; } .child2{ margin-top: 50px; margin-bottom: 70px; background-color: lightcoral; } .child3{ margin-top: 50px; background-color: lightgreen; } </style>
    </head>
    <body>
        <div class="parent">
            <div class="child child1">1</div>
            <div class="child child2">2</div>
            <div class="child child3">3</div>
        </div>
    </body>
    </html>

效果如图所示

![在这里插入图片描述][20201024175504958.png_pic_center]  
根据代码，按道理来说子元素1与子元素2之间应该相隔 `20 + 50 = 70px`，但实际却只有 `50px` ；同理，子元素2与子元素3之间应该相隔 `70 + 50 = 120px`，但实际却只有 `70px`

这是因为在垂直方向上，相邻两个元素若都设置了 `margin` 值，则按照较大的那个值来布局，这就是典型的**垂直方向上的margin重叠**问题

若此时为了避免**margin重叠**，我们可以给每一个子元素的外部添加一个父元素，并对父元素设置样式来触发BFC，那么就不会有上述的问题了

具体的代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>margin重叠</title>
        <style> .parent{ width: 200px; height: 500px; background-color: red; } .child{ width: 100px; height: 100px; margin: 0 auto; line-height: 100px; text-align: center; } .child1{ margin-bottom: 20px; background-color: lightblue; } .child2{ margin-top: 50px; margin-bottom: 70px; background-color: lightcoral; } .child3{ margin-top: 50px; background-color: lightgreen; } .third{ /*除了overflow: hidden，还可以写： 1. float: left 2. float: right 3. position: absolute 4. …… */ overflow: hidden; } </style>
    </head>
    <body>
        <div class="parent">
            <div class="third">
                <div class="child child1">1</div>
            </div>
            <div class="third">
                <div class="child child2">2</div>
            </div>
            <div class="third">
                <div class="child child3">3</div>
            </div>
        </div>
    </body>
    </html>

效果如下图所示：

![在这里插入图片描述][20201024180259156.png_pic_center]  
**补充：** 该案例中，我们通过给每个子元素套上了个父元素，并且都触发了BFC，从而实现了避免 `margin` 重叠，即我们创建了多个BFC才实现这样的效果。但是如果在一个BFC环境中，仍有多个子元素，那么这些子元素垂直方向的 `margin` 仍会出现重叠

## （4）自适应布局 ##

相比大家都有做过**文字绕图**这样的效果，其实现原理就非常的简单，只需一个 `float` 就可实现

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>文字绕图</title>
        <style> .parent{ border: 1px solid #000; width: 200px; height: 250px; } .img{ width: 100px; height: 100px; float: left; } .text{ background-color: lightgreen; } </style>
    </head>
    <body>
        <div class="parent">
            <img src="../../前端印象logo.jpg" alt="" class="img">
            <div class="text">微信公众号：前端印象，每天分享前端技术、前端面经，还有更多福利可以领取，欢迎关注，私信我加群，群里有多位大佬，可以互相交流前端技术</div>
        </div>
    </body>
    </html>

效果如下图所示

![在这里插入图片描述][20201024182712381.png_pic_center]

按道理来说，浮动的元素脱离了正常的文档流，应该会覆盖住别的元素的内容，但为什么这里实现了文字绕图的效果呢？

其实css最初设计浮动就是为了实现文字绕图的效果，虽然浮动会覆盖别的元素，但不会覆盖住文字

此时我们为了不让浮动的元素覆盖住别的元素，我们可以触发别的元素的BFC环境，因此可以给文本元素添加 `overflow: hidden` 样式，效果如下图所示

![在这里插入图片描述][20201024182652698.png_pic_center]  
看到这里，不禁想起这几年非常流行的页面布局，那就是两栏布局，如下图所示

![在这里插入图片描述][20201024182955994.png_x-oss-process_image]  
一般像这样的布局，都是左侧宽度固定了，右侧的宽度是自适应的

因此我们就可以通过刚才避免文字绕图的方式来实现这种布局

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自适应布局</title>
        <style> .parent{ height: 100vh; } .left{ width: 200px; height: 100%; background-color: lightgreen; text-align: center; float: left; } .right{ height: 100%; overflow: hidden; /* 触发BFC，不被浮动元素所覆盖 */ text-align: center; background-color: lightskyblue; } </style>
    </head>
    <body>
        <div class="parent">
            <div class="left">固定宽度</div>
            <div class="right">自适应宽度</div>
        </div>
    </body>
    </html>

效果如图所示

![在这里插入图片描述][20201024183621890.gif_pic_center]

# 四、结束语 #

官方对于BFC的讲解，我感觉是有点难以理解，因此我在本文中也没有将BFC环境中的布局规则列举出来，但其实BFC的布局规则大致可以理解为与正常的布局规则一样，只不过有些特殊的规则我在案例中也特地强调出来了，希望大家可以把每个案例好好看一看，这样应该能对BFC有个大致的了解了

你的【**赞**】 、【**收藏**】都是我创作的动力，谢谢大家的支持

[BFC]: https://www.w3.org/TR/CSS2/visuren.html#block-formatting
[20201022211026370.png_x-oss-process_image]: /images/20221123/9b31499154734036bef290f28b4ac053.png
[20201022214524360.png_x-oss-process_image]: /images/20221123/3d9d042783a747088019555921d6de69.png
[20201024171418275.png_x-oss-process_image]: /images/20221123/53b507a419714d83b95d58a719f2fc03.png
[20201024171710916.png_x-oss-process_image]: /images/20221123/a56d5031e0ef4abdb7a255641b752949.png
[20201024171856791.png_x-oss-process_image]: /images/20221123/4a7de8347904457d86281bf795ac38e0.png
[20201024175504958.png_pic_center]: /images/20221123/f237e22fce444a48a6a6ee6d91d7dff6.png
[20201024180259156.png_pic_center]: /images/20221123/2b0e5a44b1ef4104a93aca6482f813ed.png
[20201024182712381.png_pic_center]: /images/20221123/8422349be06441b28b7a417fca01d8d3.png
[20201024182652698.png_pic_center]: /images/20221123/b2eeefff95994ff79e562bdd4a1e0a98.png
[20201024182955994.png_x-oss-process_image]: /images/20221123/5275b89f0ffc460fb39a681f85f988a0.png
[20201024183621890.gif_pic_center]: /images/20221123/62bc7fa202204d0fa6554949ff0b153d.png