對於BFC的理解

勒了個浪發表於2019-04-16

何為BFC？

BFC(Block formatting context)直譯為”塊級格式化上下文”。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。 跟BFC相關的概念有Box,Formatting Conetxt。

Box

Box是CSS佈局的基本單位,分為block-level box和inline-level box，不同型別的Box，會參與不同的Formating。 block-level box:當display為block, list-item, table的元素 inline-level box:當displayinline, inline-block, inline-table的元素

Formatting context

Formatting context是頁面中的一塊渲染區域，並且有一套渲染規則，決定其子元素將如何定位，以及其他元素的關係和相互作用。 常見的Formatting context的有Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

觸發BFC

  • 根元素
  • float屬性不為none;
  • position為absolute或fixed
  • display為inline-bolck,table-cell,table-caption,flex,inline-felx
  • overflow不為visible

BFC規則

  • 內部的Box會在垂直方向，一個一個地放置(也可以在水平方向)
  • Box的距離由margin決定，屬於同一個BFC的兩個相鄰的Box的margin會發生重疊
  • 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式)。即使存在浮動也是如此
  • BFC的區域不會與float box重疊
  • BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素
  • 計算BFC的高度時，浮動元素也參與計算

BFC的用途

自適應兩欄佈局

利用BFC規則BFC的區域不會與float box重疊。觸發右邊的元素生成BFC，來實現兩欄佈局。 HTML:

<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>
複製程式碼

CSS:

html{
  height: 100%;
}
body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}	
.aside{
  width: 300px;
  height: 100%;
  float: left;
  background: #f66;
}
.main{
  height: 100%;
  background: #fcc;
  overflow: hidden;
}
複製程式碼

清除浮動

利用BFC規則計算BFC的高度時，浮動元素也參與計算。通過overflow: hidden觸發父元素生成BFC HTML:

<div class="out">
  <div class="in1"></div>
  <div class="in2"></div>
</div>
複製程式碼

CSS:

.out{
  width: 500px;
  background-color: #666;
  overflow: hidden;
}
.in1{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #999;
}
.in2{
  width: 100px;
  height: 100px;
  float: left;
  background-color: #ccc;
}
複製程式碼

防止margin重疊

利用BFC規則Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊算，我們可以在一個元素外面包裹一層容器，並處罰金該容器生成一個BFC。則和相鄰元素不屬於同一個BFC，就不會發生margin重疊了。 HTML:

<p>Haha</p>
<div class="wrap">
  <p>Hehe</p>
</div>
複製程式碼

CSS:

.wrap{
  overflow: hidden;
}
p{
  background-color: #333;
  width: 200px;
  margin: 100px;
}
複製程式碼

相關文章