BFC是什么

BFC（Block Format Content）块级格式上下文

BFC的定义：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC的生成：

display: inline-block | table-cell | table-caption;
overflow: hidden | auto | scroll;
position: absolute | fixed;
float: right | left;

BFC的作用：

• 清除浮动
  父元素生成BFC可以感知到浮动的子元素，撑开高度。
  普通元素生成BFC可以感知到浮动元素，移动位置不被遮挡。
• 解决margin合并问题
  处于同一个BFC中的相邻元素，它们的 margin 会合并，如果我们不想让 margin 合并，可以给这两个元素设置不同的BFC。