css BFC介紹

　BFC 即塊級格式上下文（Block Formatting Context），它是指一個獨立的塊級渲染區域，只有block-level的box參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

BFC的生成

1. 根元素
2. float的值不爲none
3. overflow的值不爲visible  常見的overflow爲hidden 
4. position的值爲fixed或absolute
5. display的值爲table-cell / table-caption / inline-block / flex / inline-flex

BFC的佈局規則

1.內部的盒子會在垂直方向，一個個地放置。

2.BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素

3.屬於同一個BFC的兩個相鄰BOx的上下margin會發生重疊

4.計算BFC的高度時，浮動元素也參與計算

5.每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；

6.BFC的區域不會與float重疊；

 

BFC能解決哪些問題

1.解決margin重疊問題

2.解決浮動高度塌陷問題

3.解決侵佔浮動元素的問題

 

1：margin重疊問題

.box{
  width: 200px;
  height: 50px;
  margin: 30px 0;
  background: black;
}


<div class="box"></div>
<div class="box"></div>

明顯的看到了出現了 margin的重疊問題 

滿足於BFC規則的第三條  ： 屬於同一個BFC的兩個相鄰BOx的上下margin會發生重疊

說明兩者屬於同一個BFC，所以我們將兩個div放到不同的BFC中，爲第二個div套上一個父元素，然後通過設置overflow hidden來激活BFC

.box{
  width: 200px;
  height: 50px;
  margin: 30px 0;
  background: black;
}
.content{
  overflow: hidden;
}

<div class="box"></div>
<div class="content">
    <div class="box"></div>
</div>

 

2：浮動後高度塌陷問題    

.content1{
  width:300px; 
  border:1px solid black; 
}
.box1{
  float:left;
  width:100px;
  height:100px;
  border:1px solid red;
}

<div class="content1">
  <div class="box1"></div>
</div>

能夠看到父元素沒有被撐開，BFC規則第四條：
計算BFC的高度時，浮動元素也參與計算
所以我們要將父元素觸發BFC

.content1{
  width:300px; 
  border:1px solid black; 

  overflow:hidden;
}
.box1{
  float:left;
  width:100px;
  height:100px;
  border:1px solid red;
}

<div class="content1">
  <div class="box1"></div>
</div>

3:侵佔浮動元素的問題

.left{
  width: 100px;
  height: 100px;
  background: salmon;

  float: left;
}

.right{
  width: 300px;
  height: 200px;
  background: black;
}

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

滿足了規則第五點：
每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此

所以我們要將紅色區域撐到黑色區域的左邊，就需利用規則第六條
BFC的區域不會與float重疊
我們給黑色區域right設置一個 overflow: hidden; 屬性來觸發BFC；

.right{
  width: 300px;
  height: 200px;
  background: black;
  overflow: hidden;
}