BFC理解和应用

现象：有些同事在工作的过程中遇到高度塌陷、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、浮动元素把标准流元素覆盖

针对一个场景介绍一下bfc的应用：

高度塌陷：

什么是高度塌陷，在其子元素中设置了浮动的效果（子元素变成了一个独立的渲染区域即BFC），而浮动元素脱离了标准的文档流，导致当前的元素没有被撑起来，这种现象就是高度塌陷。

解决方法：

清除浮动，其实这个也有很多的方法，我们这里只写推荐的一种

用伪元素：：after清除浮动

.cleatfix:after {

   content:"";

   display:table;

   clear:both;

} 

其他的问题我们也都可以通过形成bfc来解决