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>