BFC的理解
BFC是什么？
BFC是块级格式上下文（Block Formatting Context），是CSS布局的一个概念，在BFC布局里面的元素不受外面元素影响。
BFC如何触发？
设置浮动：float有值并不为空
float:left | right;overflow:hidden | scroll | auto;（不是visible）display:inline-block | table-cell | table-caption | flex | grid;（ 非none 非inline 非block）设置绝对定位:
position: absolute | fiexed;（ 非relative）
BFC的作用
- 解决
margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题 - 创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
- 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。
问题解决
Margin重叠问题
<div class="div1"></div>
<div class="div1"></div>
.div1 {
margin-bottom: 20px;
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
margin-top: 20px;
width: 100px;
height: 100px;
background-color: blue;
}
会导致上下两个div的margin重合：
<style>
.container {
overflow: hidden;//将它变成BFC
}
.div1 {
margin-bottom: 20px;
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
margin-top: 20px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="div1"></div>
</div>
<div class="container">
<div class="div2"></div>
</div>
</body>
Margin塌陷问题
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
.box1 {
width: 40px;
height: 40px;
margin-top: 50px;
background-color: lightgreen;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
父元素margin-top:50px，子元素没有margin-top，造成margin塌陷
给父元素变成BFC即可；
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
overflow: hidden;
}
.box1 {
width: 40px;
height: 40px;
margin-top: 50px;
background-color: lightgreen;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
高度塌陷
<style>
.father {
width: 200px;
background-color: lightseagreen;
}
.child1 {
width: 200px;
height: 200px;
float: left;
background-color: red;
}
.child2 {
width: 200px;
height: 200px;
float: left;
background-color: pink;
}
</style>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>
会发现父元素的高度为0，造成了高度塌陷；
<style>
.father {
width: 200px;
height: 500px;
background-color: lightseagreen;
overflow: hidden;
}
.child1 {
width: 200px;
height: 200px;
float: left;
background-color: red;
}
.child2 {
width: 200px;
height: 200px;
float: left;
background-color: pink;
}
</style>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
</div>
