胖蔡说技术作为一个成熟的前端程序员，你应该听过BFC这个单词了，BFC基本可以说是现在我们前端布局的一个灵魂属性了。今天我们来说一说BFC的那些事儿。
BFC是什么？
BFC就是我们通过CSS布局一个容器，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。容器内的布局按规则排放不会影响容器外部的布局。若是HTML元素符合BFC的条件，则BFC的内部布局不会受到外部布局的影响。
BFC形成条件
- 浮动布局方式，即
float布局除了none属性值以外的其他布局 overflow取（非visible）：hidden，auto，scrolldisplay布局取值：inline-block、table-cell、table-caption、flex、inline-flex、table、table-row、table-row-group、table-header-group、table-footer-group、flow-root、grid、inline-gridposition取值：absolute，fixedcontain取值为layout、content或paint的元素- 多列容器（
column-count或column-width值不为auto，包括column-count为1） column-span值为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中
为什么要使用BFC？
BFC的出现本身也是为了解决问题的。
- 解决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>BFC</title>
<style>
* {
margin: 0;
}
.box1 {
width: 300px;
height: 300px;
background: skyblue;
}
.box2 {
width: 130px;
height: 130px;
background: lightgreen;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
如上，box2 的margin-top传递到了 box1 那，即 box2 影响到了外面的元素 box1的布局，这时候，我们可以通过BFC是的box1变成一个独立的容器，其内部样式不会影响外部元素。
.box1 {
width: 300px;
height: 300px;
background: skyblue;
overflow: hidden; /* 触发了 BFC 规则，形成了独立容器 */
}
- BFC可以解决子元素浮动导致父元素高度塌陷问题
- margin重叠问题
- 防止文字环绕
