BFC块级格式上下文

定义：Block format context 块级格式上下文

BFC原理：

1.BFC元素垂直方向上边距会发生重叠（哪个px大就选择哪个）
2.BFC区域不会与浮动元素发生重叠
3.BFC是一个独立容器，容器里面的元素不会影响到外面的元素，外面的元素也不会影响他。
4.计算BFC的高度时，浮动元素也参与计算。

---

创建BFC：

float属性不为none
position属性为absolute或fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性不为visible

---

BFC使用场景

1.自适应两栏布局（浮动时，右浮动高于左浮动）
在浮动元素上加overflow:hidden
2.清除内部浮动（当子元素均浮动时，其无法撑开父元素）
在父元素上加 overflow: hidden;
3、防止marin重叠
在其中一个元素上增加一个父元素，加属性：overflow: hidden;

---

清除浮动

//第一种方法(父级元素添加属性overflow:hidden或者overflow: auto)
<div class="floatbox">
    <div class="inner">浮动1</div>
</div>
<style>
.floatbox{
  background: red;
   overflow: hidden;
   //overflow: auto,
}
.inner{
  float: left;
  height: 50px;
  background: beige;
}
</style>

//第二种方法(添加一个元素，增加属性clear:both)
//在ie6浏览器中，即使div为空的，也有高度
<div class="floatbox">
    <div class="inner">浮动2</div>
    <div style="clear:both;height:0;overflow:hidden" />
 </div>
 <style>
 .floatbox{
  background: red;
}
.inner{
  float: left;
  height: 50px;
  background: beige;
}
 </style>

//第三种方法(父级after伪类)
<div class="floatbox">
    <div class="inner">浮动3</div>
 </div>
 <style>
.floatbox{
  background: red;
}
.inner{
  float: left;
  height: 50px;
  background: beige;
 
}
.floatbox:after{
  display: block;
  content: ' ';
  clear:both;
  height:0;
  overflow:hidden
}
 </style>