BFC

BFC全稱爲Block Formatting context（我通常都會記英文）,翻譯成中文就是——塊級格式化上下文。他是web中一個獨立的渲染區域，只有BBlock-level 參與，他規定了內部的Block level Box如何佈局，而且這個區域和這個區域外部絕不相干。(剛開始寫博客，寫的有問題的地方請指出，謝謝)

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

哪些元素會生成BFC？
1.根元素
2.float屬性不爲none
3.position爲absolute或fixed
4.display是inline-block，table-cell，table-caption，flex，inline-flex
5.overflow不爲visible

接下來咱們先寫一個佈局
代碼

咱們寫兩個div，並設置簡單的樣式，
效果：

咱們再給紅色div設置float：left
效果

咱們能夠看到BFC內部的Box會在垂直方向，一個接着一個的排列，即便浮動也是如此，而box垂直方向的距離有margin決定的。
咱們讓黃色div變成BFC，添加over-flow:hidden
效果：

這就說明了：BFC的區域不會與float重疊。
而後咱們給body添加背景色，刪掉沒必要要的代碼，給第一個div添加一個margin-bottom：50px。
效果:

咱們再給第二個div添加一個margin-top：50px
效果：

咦？兩個div的間距怎麼沒改變呢？由於這兩個div屬於同一個BFC，由此可明屬於同一個BFC的兩個相鄰Box的margin會發生摺疊 。那怎麼才能解決呢？其實很簡單，既然兩個div在屬於同一個BFC的時候會發生margin摺疊，那麼咱們不讓他們處於同一個BFC不就好了嗎？那怎樣才能不在同一個BFC呢。
咱們給第二個div添加一個盒子，
代碼：

效果：

給class：father設置overflow：hidden就能夠解決margin摺疊了

接下來再看下一個
咱們寫一個div，裏面再嵌套兩個div
代碼：

效果：

喲，高度塌陷了，父元素沒有被撐開？然而咱們只要給父級設置overflow：hidden觸發BFC就能夠解決高度塌陷了
效果：

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

BFC有哪些做用：

1. 自適應兩欄佈局
   2能夠阻止元素被浮動元素覆蓋
   3能夠包含浮動元素——清除內部浮動
   4.分屬於不一樣的BFC時能夠阻止margin重疊

--------------------- 做者：和平世界的守護者 來源：CSDN 原文：https://blog.csdn.net/qq_34763438/article/details/76690635?utm_source=copy 版權聲明：本文爲博主原創文章，轉載請附上博文連接！