CSS進階 --- BFC

帕尼尼0_0發表於2018-08-16
CSS

BFC (Block formatting context) “塊級格式化上下文”

它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其他元素之間的關係和作用。
轉載自 前端精選文摘：BFC 神奇背後的原理

觸發條件

  • 根元素，即HTML元素
  • float的值不為none
  • overflow的值不為visible
  • display的值為inline-block，table-cell，table-caption ，flex，inline-flex
  • position為absolute或fixed

佈局規則

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

特性

1.自適應兩欄佈局

<style>
    body {width: 300px;position: relative;}
    .aside {width: 100px;height: 150px;float: left;background: #f66;}
    .main {height: 200px;background: #fcc;}
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。 根據BFC佈局規則第四條：

BFC的區域不會與float box重疊。

我們可以通過通過觸發main生成BFC， 來實現自適應兩欄佈局。
.main {overflow: hidden;}
當觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：

2.清除內部浮動

<style>
    .par {border: 5px solid #fcc;width: 300px;}
    .child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

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

為達到清除內部浮動，我們可以觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算。
.par {overflow: hidden;}

3.防止垂直 margin 重疊

可以參考另一篇部落格CSS3進階 — 邊距摺疊

<style>
    p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>


兩個p之間的距離為100px，傳送了margin重疊。

Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

我們可以在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。

<style>
    .wrap {overflow: hidden;}
    p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

相關文章