是时候了解一下，你一直在使用，却不知道概念的CSS BFC

概念

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

什么鬼？干什么？我用过？

其实就是你的页面，不信你看看

BFC创建的方法

根元素(<html>)
浮动元素 (元素的 float 不是 none)
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

看第一条根HTML元素，那不就是我们整个页面就是一个BFC;

BFC包含创建它的元素内部的所有内容，但是不包括创建了新BFC的子元素的内部内容

BFC布局规则：

内部的盒会在垂直方向一个接一个排列（就是平常我们块级元素的排列）；
浮动盒区域不会与BFC重叠；
每个元素的margin的左边，与容器块border 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
处于同一个BFC中的元素相互影响，可能会发生margin(外边距)重叠；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

规则1 内部的盒会在垂直方向一个接一个排列

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
复制代码

div {
    height: 50px;
}

.box1 {
    width: 400px;
    background-color: #82A6F5;
}

.box2 {
    width: 300px;
    background-color: #EAF048;
}

.box3 {
    width: 100px;
    background-color: #9FF048;
}

.box4 {
    width: 200px;
    height: 30px;
    background-color: #2A5200;
}
复制代码

规则2 浮动盒区域不会与BFC重叠

蓝色盒子设置浮动，黄色盒子会与之重合

<div class="col1"></div>
<div class="col2"></div>

复制代码

div {
    height: 400px;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}
复制代码

创建BFC

使用overflow：hidden创建BFC

.col2 {
    /**创建BFC**/
    overflow: hidden;
	height: 500px;
    background-color: #EAF048;
}

复制代码

规则3 每个元素的margin的左边，与容器块border 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

<div class="col1"></div>
<div class="col2"></div>

复制代码

body{
    border: 10px solid #000000;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}
复制代码

规则5 处于同一个BFC中的元素相互影响，可能会发生margin重叠（以最大的margin为准）；

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
复制代码

.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
    margin-bottom: 50px;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    margin-bottom: 60px;
}

复制代码

规则6 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算

图1

<div class="col">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

复制代码

.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}

.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    float: left;
}

复制代码

图2

增加div.col overfloe:hidden;,创建了一个新的BFC高度增加

.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}
复制代码

咦？怎么少了个规则4呢，其实仔细看看上面的例子都体现了布局规则4 - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；

BFC能解决什么呢？

$\color{#ff534d}{1.自适应两栏布局（详见规则2的列子）}$

$\color{#ff534d}{2.让浮动内容和周围的内容等高，清除浮动（详见规则6的列子）}$

$\color{#ff534d}{3.分属于不同的BFC时可以阻止外边距塌陷}$

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免外边距塌陷也是这样的一个道理。

结语

上面说的有些东西，其实在我们平常的布局中，已经有在使用这些规律，只是没有总结出来，如果写的不好之处欢迎批评指导。

如果你感觉你学会，点个赞呗！！！

参考链接：

Block Formatting Context

CSS中的BFC详解