BFC——格式化上下文。
这到底是个啥？
首先来回顾一下css定位机制。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 BFC属于普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，是一个独立的渲染区域。简单来说就是一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部元素。
具有BFC特性的容器有以下特点：
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
- BFC是页面一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也会参与计算。
- BFC内部的盒子Box会在垂直方向，一个接一个地放置。
- BFC的区域不会与浮动盒子float box重叠。
哪些情况可以触发BFC?
- body根元素。
- float属性不为none，也就是left/right。
- position为absolute或fixed。
- display为inline-block, table-cell, table-caption, flex, inline-flex。
- overflow不为visible，也就是auto/hidden。
BFC可以解决什么问题？
- 清除浮动
回顾一下我们为啥要清除浮动？主要是为了避免出现父元素高度塌陷的问题。
高度塌陷示例：
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.23.12.png
我们把父元素的边框设置为黑色、1px，但发现父元素中的子元素没有被这个边框包裹起来，出现了高度坍塌。
解决办法之一是使用clear:both来清除浮动：
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="clear"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.30.06.png
可以看到，问题解决了。
另一个方法是把父元素变成BFC容器，给父元素加上overflow:hidden的样式：
<html>
<head>
<title>test</title>
<style type="text/css">
.father {
border: #000 1px solid;
overflow: hidden;
}
.child {
float: left;
}
.child1 {
background: red;
width: 200px;
height: 200px;
}
.child2 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.32.40.png
- 边距重叠问题
<html>
<head>
<title>test</title>
<style type="text/css">
.box1 {
background: blue;
width: 200px;
height: 200px;
margin: 20px;
}
.box2 {
background: red;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
问：box1和box2的间隔有多宽？20+20=40(px)？，错了，因为发生了边距重叠，所以两者之间的间隔只有20px。
屏幕快照 2020-04-12 下午3.37.12.png
出现问题的原因是：box1和box2同属于BFC容器body，属于同一个BFC的两个相邻Box的margin会发生重叠。
那么解决方法显而易见：把它们放在不同的BFC里面就ok了。
<html>
<head>
<title>test</title>
<style type="text/css">
.bfc {
overflow: hidden;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
margin: 20px;
}
.box2 {
background: red;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div class="bfc">
<div class="box1"></div>
</div>
<div class="bfc">
<div class="box2"></div>
</div>
</body>
</html>
屏幕快照 2020-04-12 下午3.49.47.png
- 防止被浮动元素覆盖
<html>
<head>
<title>test</title>
<style type="text/css">
.box2 {
background: red;
width: 100px;
height: 100px;
float: left;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
</html>
屏幕快照 2020-04-12 下午4.22.09.png
box1被浮动元素box2盖住了。
把box1改为BFC试试：
<html>
<head>
<title>test</title>
<style type="text/css">
.box2 {
background: red;
width: 100px;
height: 100px;
float: left;
}
.box1 {
background: blue;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
</html>
屏幕快照 2020-04-12 下午4.24.25.png
现在两者是并列的，box1不会被覆盖。
