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;
三、防止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>