前言

在前端布局中，我们可能没有听说过BFC, 但我们一定在很多地方用到过BFC，很多开发者对BFC的作用只是将将说出来，并不是说的很清楚，基于此，本文就来深入探讨一下CSS中的BFC。

1 FC是什么

在讲BFC之前，我们先回顾一网页布局中的文档流。常见的文档流有三种：标准流、浮动流、定位流。有关文档流的内容可看我之前文章：juejin.cn/post/695983…

FC全称：Formatting Context，名为“格式化上下文”，是指具有某种CSS格式化规则（布局规则）的上下文环境，在这个上下文环境的所有子元素，都将根据其特定的CSS格式化规则进行排列。

我们可以给某个作为容器的元素指定特定的格式化上下文，此时这个元素就是具有特定的布局规则的渲染区域。常见的格式化上下文有：

BFC（块级格式化上下文）
IFC（内联格式化上下文）
FFC（自适应格式化上下文）
GFC（网格布局格式化上下文）

2 BFC是什么

全称为：块级格式化上下文，是一个外部独立渲染的区域。
是一种规则，作用就是隔离保护，里面的元素通过BFC布局，不会对外面的元素产生影响。

BFC就好比西游记里孙悟空画了一个圈让师傅和师弟呆在圈里，这样妖精就不能伤害师傅师弟，这个圈就是BFC，作用就是隔离保护，实际工作中我们也是利用BFC来解决实际问题。

bfc理解.jfif

3 如何触发BFC

并不是任意一个元素都可以当做BFC，只有当这个元素满足下面其中之一条件时，这个元素才可以当做一个BFC。

float不为none(left、right)
position不为relative (absolute、fixed)
overflow不为visible (hidden、auto、scroll)
display 为flex，line-block，table-cell，table-caption
html根元素

4 BFC特性

内部的 Box 会在垂直方向上一个接一个的放置
垂直方向上的距离由 margin 决定
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动元素也参与计算
一个BFC区域只包含其子元素，不包括其子元素的子元素

5 BFC应用场景

在了解触发BFC条件和特性后，我们需要利用BFC特点来解决一些在布局中实际问题，其中BFC最大特点就是：每一个BFC区域都是相互独立，互不影响的。

5.1 解决外边距合并问题

5.11 问题呈现

当垂直排列的两个块级元素，同时给上面的盒子设置margin-bottom和下面的盒子设置margin-top，此时会形成外边距合并。

当两个值为正值时，取最大值
一正一负时，两个值相加

<head>
<meta charset="utf-8" />
<title>外边距合并</title>
<style>
    *{
            margin:0 auto;
            padding:0
    }
    .box{
            width:100px;
            height:100px;
            background-color:pink;
            margin-bottom:100px;
    }
    .box:last-of-type{
            background-color:aquamarine;
            margin-top:100px;
    }	
</style>
</head>
<body>
	<div class="box"></div>
	<div class="box"></div>
</body>

5.12 解决方案

将两个div放置在不同的BFC，这样这两个BFC的内容将不会互相干扰，把两个BFC分别包裹在两个container容器中，利用overflow:hidden触发container的BFC。

<head>
<meta charset="utf-8" />
<title>外边距合并问题解决</title>
<style>
    *{
        margin:0 auto;
        padding:0
    }
    .box{
        width:100px;
        height:100px;
        background-color:pink;
        margin-bottom:100px;
    }
    .container:last-of-type .box{
        background-color:aquamarine;
        margin-top:100px;
    }
    .container{
        overflow:hidden;
    }
</style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

5.2 解决外边距塌陷问题

5.21 问题呈现

嵌套的两个块级元素给子元素设置向上的外边距，此时父元素会跟着掉下来，形成的是外边距塌陷。

<head>
<meta charset="utf-8" />
<title>外边距塌陷</title>
<style>
    *{
        margin:0;
        padding:0
    }
    .father{
        width:300px;
        height:200px;
        background-color:aquamarine;	
    }
    .son{
        width:100px;
        height:100px;
        background-color:pink;
        margin-top:100px;
    }
</style>
</head>
<body>
	<div class="father">
	  	<div class="son"></div>
	  </div>
</body>

5.22 解决方案

给父元素设置1像素的上内边距或者上边框
给父元素开启BFC

<head>
<meta charset="utf-8" />
<title>外边距塌陷问题解决</title>
<style>
    *{
        margin:0;
        padding:0
    }
    .father{
        width:300px;
        height:200px;
        /* 给父元素设置1像素的上内边距 */
        padding-top:1px;
        /* 给父元素设置1像素的上边框*/     
        border-top:1px solid transparent;
        /* 给父元素开启BFC */
        /* overflow: hidden; */
        background-color:aquamarine;	
    }
    .son{
        width:100px;
        height:100px;
        background-color:pink;
        margin-top:100px;
    }
</style>
</head>
<body>
<div class="father">
  	<div class="son"></div>
  </div>
</body>

5.3 清除浮动

先看一个例子，父亲包裹着子元素，当我们设置浮动后，子元素脱离文档流，父元素高度为0 。

<head>
<meta charset="utf-8" />
<title>清除元素浮动</title>
<style>
*{
    margin:0;
    padding:0
}
.father{
    background-color:aquamarine;
}
.son{
    width:100px;
    height:100px;
    background-color:pink;
    float:left;
}
</style>
</head>
<body>
<div class="father">
  	<div class="son"></div>
  </div>
</body>

通过overflow属性触发BFC，父元素将会包裹子元素，从而达到清除浮动作用。

.father{
    background-color:aquamarine;
    overflow:hidden;
}

5.4 阻止元素被浮动元素覆盖

当左侧盒子设置浮动后，浮动元素会覆盖了没有添加浮动的元素。

<head>
<meta charset="utf-8" />
<title>阻止元素被浮动元素覆盖 </title>
<style>
    *{
            margin:0;
            padding:0
    }
    .floatDiv{
            width:100px;
            height:200px;
            background-color:aquamarine;	
            float:left;
    }
    .normalDiv{
            width:200px;
            height:200px;
            background-color:pink;
    }
</style>
</head>
<body>
    <div class="floatDiv">1</div>
    <div class="normalDiv">233333332</div>
</body>

但这并不是我们想要的结果，我们可以触发.normalDiv的BFC来解决这个问题。普通流体BFC后，和浮动元素不会产生交集，顺着浮动元素形成自己的封闭上下文。

.normalDiv{
   overflow: hidden;
}

6 总结

FC是一种布局规则，在这个布局规则中子元素，都要按照特定的规则进行排序；
BFC块级格式化上下文，是一个外部独立渲染的区域，里面的元素通过BFC布局，不会对外面元素产生影响；
可以用来清除浮动、解决外边距合并塌陷问题、制作自适应盒子。

结语

本篇文章就到此为止啦，由于本人经验水平有限，难免会有纰漏，对此欢迎指正。如觉得本文对你有帮助的话，欢迎点赞收藏❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持。

【CSS】CSS中隐藏着的BFC

前言