學習CSS中的BFC

定義

BFC全稱爲block formatting context，意爲塊級格式化上下文，是Web頁面中盒模型佈局的css渲染模式。

可能上面的解釋看了有點懵逼，通俗的說BFC指的的是一塊區域的佈局， 這個區域的佈局有一個顯著特色：這個區域內的子元素不管使用何種佈局、何種樣式都不會影響外部的元素。BFC比較常見的用法就是用來清除浮動的影響，正常不清楚浮動影響的狀況下，父元素的高度是會坍塌的

那麼何時會觸發BFC呢？知足一下條件中任何一個：

• float的值不爲none
• position的值不爲static或者relate
• display的值爲table-cell、table-caption、inline-block、flex或者inline-flex中的任意一個
• overflow的值不爲visible

做用

清除浮動

咱們常常會遇到這樣的狀況：當一個容器內包含的子元素包含浮動元素時，會致使容器沒有高度，人們經常使用一個僞類，而後在僞類中用clear屬性清除浮動，其實能夠經過定義一個BFC來達到一樣的目的，舉個例子：

<div class="container">
    <div></div>
    <div></div>
</div>

.container {
  width: 600px;
  background-color: black;
}
.container div {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: 10px;
  background-color: green;
}

當子元素存在float屬性時，父容器沒有設置高度，父容器的高度就會塌陷，咱們能夠經過在父容器中加overflow:hidden建立一個BFC來解決這個問題：

.container {
  width: 600px;
  background-color: black;
  overflow: hidden;  
}
.container div {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: 10px;
  background-color: green;
}

防止文字環繞

<div>
    <img src="../public/image/test.jpeg">
    <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>

img {
  float: left;
  width: 40px;
  height: 40px;
}

如上面例子所示，正常狀況下咱們期待的結果是左邊顯示圖片，右邊顯示文字描述，而不是上面展現的文字環繞在圖片周圍，此時咱們一樣能夠經過建立一個BFC來解決這個問題：

img {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
p {
  overflow: hidden;
}

防止外邊距摺疊

常規文檔流中，子元素都是沿着父元素頂部開始一個接着一個垂直襬放的，相鄰兄弟間的垂直間距由他們中間距最大的一個元素決定，而不是疊加在一塊兒，這就是邊距摺疊，舉個例子：

<div class="container">
    <p class="one">one</p>
    <p class="two">two</p>
</div>

.container {
  width: 200px;
  background-color: black;
}
p {
  width: 150px;
  background-color: green;
}
.one {
  margin: 10px 0;
}
.two {
  margin: 20px 0;
}

這種狀況，咱們能夠經過建立一個新的BFC來解決

<div class="container">
  <p class="one">one</p>
  <div class="new">
    <p class="two">two</p>
  </div>
</div>

.container {
  width: 200px;
  background-color: black;
}
p {
  width: 150px;
  background-color: green;
}
.one {
  margin: 10px 0;
}
.two {
  margin: 20px 0;
}
.new {
  overflow: hidden;
}

總結

這篇文章簡單的介紹了BFC特色和舉例了BFC的經常使用方法，若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊收藏
最後，打個小廣告：阿里雲雙十一雲服務新用戶一折優惠車票