个人理解
1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；
2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；
3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。
二、BFC有什么用？
BFC的触发条件
1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed
BFC的特性
1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素
BFC功能总结
1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
开启bfc之后
1.开启BFC 的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
常见margin重叠的两种方式：
-
相邻两个相邻Box的margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决margin重叠</title>
<style>
*{
margin:0;
padding: 0;
}
.up,.down{
width:200px;
height: 200px;
background: pink;
margin:50px;
}
</style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
</body>
</html>
效果图
解决办法：
在外层包一层div解决margin重叠，overflow:hidden开启新的BFC，使其不属于同一个BFC。
<body>
<div class="up"></div>
<div style="overflow: hidden;">
<div class="down"></div>
</div>
</body>
-
子父margin重叠：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子父margin问题</title>
<style>
*{
margin:0;
padding:0;
}
.wrap{
width:300px;
height: 300px;
background: pink;
/*overflow: hidden;*/
/* border:1px solid black; */
}
.inner{
width:150px;
height: 150px;
background: green;
margin:50px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
</body>
</html>
解决办法：
1、在父节点中 overflow：hidden开启新的BFC
2、在父节点外边描一个1px的框，隔开不在同一个BFC
image.png
什么是高度塌陷？怎么通过bfc解决？
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。这就是高度塌陷。
解决高度塌陷的方法，在发生塌陷的元素上:
- 1 将父元素的高度固定（但不推荐，因为在后续更改样式会不太方便）
- 2 在父元素结尾添加一个空的div,因为这个空的div并没有浮动，可将父元素内容撑 开，但会导致页面结构增加
- 3 使用after伪类解决高度塌陷
.box1::after{
content:''; ——内容不显示，无内容显示
display:block; ——after元素是一个行内元素，将它显示为一个块元素
}
2.开启BFC
BFC(间接 开启，或多或少会有一些不好的影响)BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区
开局已经说了怎么开启bfc了
1.设置元素的浮动（不推荐用来开启BFC）例如： float:left;
2.将元素设置为行内块元素（不推荐用来开启BFC）例如： display:inline-block;
3.将元素的overflow设置为一个非visible的值 overflow:hidden;
常用的方式为元素设置overflow:hidden;开启其BFC,以使其可以包含住它的子元素
