bfc是什么_BFC的触发和作用

前言：BFC的全称是块级格式化上下文，是很抽象的概念，具体是什么很难说清，但是一定要了解如何触发BFC和BFC有那些作用。

面试里如果遇到如何遇到问什么是BFC的话，不要试着去说什么是BFC，就是块级格式化上下文，尽量说BFC的作用，以及如何触发，这就是BFC。

如何触发BFC？

• 根元素，即HTML元素
• float不为none
• overflow的值不为visible
• display的值为inline-block,table-cell,table-caption
• position的值为absolute或者fixed

BFC的作用？

• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖
• 如果元素里面包含浮动元素，可以清除内部浮动（原理：父元素创建了BFC后，里面的子元素即使是float也会参与高度计算）
• 分属于不同BFC时，可以防止margin重叠

以下是作用的几个例子：

1.自适应两栏布局

未创建BFC时还不能实现两栏布局

创建BFC后

HTML代码和CSS代码：

<

2.可以阻止元素被浮动元素覆盖

通过将浮动元素设置为白色透明背景色，可以看得出右边的元素被左边的浮动元素覆盖

将右边的元素创建BFC后，右边元素不会被左边浮动元素覆盖,为了更明显的显示，将背景色改成了黄色

HTML和CSS代码

<

3.清除内部浮动

可以看见在父元素里面的两个浮动元素跑出来了，如果清楚了内部浮动，就不会跑出来了

父元素创建BFC后，可以看见内部的浮动元素被清除浮动了

HTML和CSS代码

<

4.分属于不同BFC时，可以防止margin重叠，这里举出兄弟边距重叠的例子

将上下两块元素的margin都设置为40px，我们可以发现，上下两块元素之间的边距也是40px；说明发生了边距重叠

将左边的元素创建BFC后我们可以看到，边距重叠消失了

HTML和CSS代码

 <div class="container">
     <div class="left"></div>
     <div class="right"></div>
 </div>

-----------------------------------------------------------------------

.left{
  width:100px;
  height:200px;
  background:green;
  margin:40px;
  display:inline-block;//创建了BFC
}
.right{
  margin:40px;
  width:400px;
  height:200px;
  background:red;
}