BFC是 Block Formatting Context （块级格式上下文）的简写。是用于决定块盒子的布局及浮动相互影响范围的一个区域。在默认的情况下BFC是关闭的；当元素满足某些条件时会开启BFC。
开启了BFC能解决什么问题?
- 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
- 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
- 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
如何开启BFC？
- 根元素：html默认是开启BFC的
- 浮动元素：副作用是脱离文档流，进入浮动流
- 绝对定位、固定定位的元素：副作用是脱离文档流，进入定位流
- 行内块元素：副作用是块间会有margin
- 表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
- overflow 的值不为 visible 的块元素
- 变成弹性元素，其父容器应设置为
display:flex - display值为inline-block 、 table-cell 、 table-caption 、 table 、 inline-table 、flex 、 inline-flex 、 grid 、 inline-grid
- 多列容器
- column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
display:flow-root，该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。新增的属性，不兼容IE，副作用较小
- 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
示例
未开启BFC时，如下代码出现了如下的margin塌陷问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_BFC_演示1</title>
<style>
* {
margin: 0;
padding: 0;
}
.outer {
width: 400px;
background-color: #888;
}
.inner {
width: 100px;
height: 100px;
margin: 20px;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
.inner3 {
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
<div style="height: 100px;width: 100px;background-color: aquamarine;"></div>
</body>
</html>
如下代码注释部分可解决margin塌陷问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_BFC_演示1</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* display: flex; */
}
.outer {
width: 400px;
background-color: #888;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
/* display: table; */
/* overflow: auto; */
/* column-count: 1; */
/* display: flow-root; */
}
.inner {
width: 100px;
height: 100px;
margin: 20px;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
.inner3 {
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
</body>
</html>
- 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
如下代码会出现绿盒子被浮动的橙盒子遮盖的情况
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_BFC_演示2</title>
<style>
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: orange;
float: left;
}
.box2 {
background-color: green;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
/* display: table; */
/* overflow: auto; */
/* column-count: 1; */
/* display: flow-root; */
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
遮盖情况如下
通过注释部分的方法可解决浮动遮盖问题
3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
如下代码会出现父盒子高度塌陷的情况
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_BFC_演示3</title>
<style>
.outer {
width: 400px;
background-color: #888;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
/* display: table; */
/* overflow: auto; */
/* column-count: 1; */
/* display: flow-root; */
}
.inner {
width: 100px;
height: 100px;
float: left;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
</div>
</body>
</html>
注释部分可解决高度塌陷的问题
以上开启BFC的方法会有一些副作用，不如
注意：一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内
部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时
处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作
用。
