小結自己對BFC的理解

一、BFC概念

BFC的全稱是塊格式化上下文（Block Formatting Context，BFC）

1. body 根元素
2. 浮動元素：float 除 none 以外的值
3. 絕對定位元素：position (absolute、fixed)
4. display 為 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

這些只是常見的，當然還有很多別的。

二、舉例應用

1. 父元素包住子元素

當子元素為float時會脫離文件流，通過觸發BFC父元素包住浮動子元素，讓浮動內容和周圍的內容等高。

<div class="parent">
  <div class="son">子元素</div>
  <div>我是內容</div>
</div>
.parent{
  border:1px solid red;
  overflow: auto;/* 觸發BFC */
}
.son{
  border:2px solid blue;
  width:300px;
  height:50px;
  float:left;
}
複製程式碼

2. 相鄰元素隔離 當兄弟元素為float時會脫離文件流，和其他兄弟元素重疊。通過觸發BFC將兄弟元素隔離開。

<div class="parent">
  <div class="son1">子元素</div>
  <div class="son2">我是內容</div>
</div>
.son1{
  border:1px solid blue;
  width:300px;
  height:50px;
  float:left;
}
.son2{
  border:3px solid black;
  height:50px;
  overflow: auto;/* 觸發BFC */
}
複製程式碼

三、奇技淫巧

使用display: flow-root

一個新的display屬性的值，它可以建立無！副！作！用！的BFC。