关于BFC的浅见

初次接触BFC概念是在学浮动的时候，网课老师说啊：“浮动元素产生了浮动流，只有产生了BFC的元素，和文本类属性的元素及文本才能看到它”。到此我就产生了疑问，带着疑问的我呢，继续听完了那节网课也没搞懂什么叫BFC，随着网课的听完，我也就将它抛诸脑后了。
今天呢，想起这个问题，也就顺手百度学习了一下。

BFC 全称为 块格式化上下文 (Block Formatting Context) 。

那么BFC有什么作用呢？仅仅是能看到浮动元素吗？

1.用来解决垂直方向margin合并问题

块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象，如图所示。
解决方案：为灰色方块添加父级，为父级添加BFC，添加后效果：

2.因为BFC可以看到浮动元素，因此可以被用作解决兄弟间因浮动产生的覆盖问题

解决方案：为绿色添加BFC，添加后效果

3.解决高度塌陷问题，在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。

解决方案：为父级元素添加BFC，添加后效果

那怎么产生BFC呢？

1.float属性不为默认值
2.overflow不为visible
3.display不为block或inline
4.position不为static或relative

总结：BFC（块级格式化上下文）能解决“margin塌陷问题 ”，“高度塌陷问题”，“因浮动产生的覆盖问题”。