现象：有些同事在工作的过程中遇到高度塌陷、margin重叠、标准元素被浮动元素覆盖的情况，有时候通过百度的方法是解决了，但是没有理解其原因是什么。这就引出了我们的主角BFC。
BFC： Block format content 即块级格式化上下文 ，它是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
形成BFC的常见条件：
1、float不是none即浮动布局
2、position是absolute或者fixed
3、overflow 不是visible即设置了滚动
4、display是flex 、inline-block等
现象：
1、子元素把父元素顶到造成高度塌陷
2、所有毗邻的两个或者多个盒元素的margin将会合并为一个margin共享
3、浮动元素把标准流元素覆盖
扫描二维码关注公众号，回复：
14727836 查看本文章
针对一个场景介绍一下bfc的应用：
高度塌陷：
什么是高度塌陷，在其子元素中设置了浮动的效果（子元素变成了一个独立的渲染区域即BFC），而浮动元素脱离了标准的文档流，导致当前的元素没有被撑起来，这种现象就是高度塌陷。
解决方法：
清除浮动，其实这个也有很多的方法，我们这里只写推荐的一种
用伪元素：：after清除浮动
.cleatfix:after {
content:"";
display:table;
clear:both;
}
其他的问题我们也都可以通过形成bfc来解决