淺談css的BFC

什麼是BFC

BFC(Block Formatting Context)全名叫塊級格式化上下文。它決定了元素如何對其内容進行定位，以及與其他元素的關系和互相作用。 當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。

怎麼形成BFC

BFC的形成一般可以有以下幾種方式

• 根元素
• position為absolute、fixed
• float元素
• overflow不為visible
• dispaly為 inline-block、flex、table-cell

BFC有什麼特點

• 垂直方向上自上而下排列，和文檔流的方向一緻
• 每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此；
• BFC容器是一個獨立的區域，内部元素和外部元素互不影響。
• 浮動元素不與BFC元素相疊加
• BFC計算高度時，需要把浮動元素也計算在内

用來做什麼

解決margin重疊問題

根據BFC容器是一個獨立的區域，内部元素和外部元素互不影響。這一特性，可以解決margin重疊問題

<div class="first-block"></div>
<div class="second-block">
    <p>解決margin重疊問題</p>
</div>
           

.first-block {
    display: inline-block; // 形成BFC
    background: #F44336;
    width: 200px;
    height: 200px;
}
.second-block {
    background: #00BCD4;
    width: 200px;
    height: 200px;
}
           

預設情況下由于margin有重疊問題，是以兩盒子的距離為

60px

。

但是我們給第一個盒子添加

display: inline-block;

樣式後，就形成了BFC,然後根據BFC容器是一個獨立的區域，内部元素和外部元素互不影響這一特性，這時兩盒子的距離為

100px

。

解決高度塌陷問題

根據BFC計算高度時，需要把浮動元素也計算在内，可以解決因浮動而導緻的高度塌陷問題。隻需在浮動元素外層的元素上加

overflow:hidden

的樣式。

自适應兩欄布局

<div class="first-block"></div>
<div class="second-block">
    預設情況
</div>
           

.first-block {
  background: #F44336;
  width: 50px;
  height: 100px;
  margin-bottom: 60px;
  float: left;
}
.second-block {
    background: #00BCD4;
    width: 100px;
    height: 200px;
    overflow:hidden;
}
           

預設情況下浮動元素會和其它元素層疊，這時給

second-block

添加

overflow:hidden;

形成BFC,根據BFC不和浮動元素疊加特性，就可以做自适應兩欄布局。

另外，此文章也同步在我的個人公衆号，歡迎交流