BFC的理解
- BFC是什么？
- BFC如何触发？
- BFC的作用
- 问题解决
- Margin重叠问题
- Margin塌陷问题
- 高度塌陷
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>
