[TOC] BFC（Block Formatting Context——塊格式化上下文）是Web頁面的可視化CSS渲染的一部分。它是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。簡單來說，BFC是一個獨立的渲染區域，它遵循一些渲染規則。 ## BFC的渲染規則 - BFC在Web頁面上是一個獨立的容器，容器內外互不影響 - 和標準文檔流一樣，BFC內的元素垂直方向的邊距會發生重疊 - BFC不會與浮動元素的盒子重疊 - 計算BFC高度時即使子元素浮動也參與計算 ## 如何創建BFC MDN web docs現在給出創建BFC的方法有以下幾種（[原文鏈接](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)）： - 根元素或包含根元素的元素 - 浮動元素（元素的 float 不是 none） - 絕對定位元素（元素的 position 為 absolute 或 fixed） - 行內塊元素（元素的 display 為 inline-block） - 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值） - 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值） - 匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table） - overflow 值不為 visible 的塊元素 - display 值為 flow-root 的元素 - contain 值為 layout、content或 strict 的元素 - 彈性元素（display為 flex 或 inline-flex元素的直接子元素） - 網格元素（display為 grid 或 inline-grid 元素的直接子元素） - 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1） - column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中 ## BFC的應用場景 ### 解決塊級元素垂直方向的邊距重疊問題 ```html <section id="father"> <style> #father { background-color: pink; overflow: hidden; } #father .child { background-color: red; margin: 15px auto 20px; } </style> <div class="child">這是第一個div</div> <div class="child">這是第二個div</div> </section> ```  由于塊級元素垂直方向的邊距會發生重疊，第一個div和第二個div之間的間距并不是15px加上20px后的35px，而是20px（較大的margin值），為了解決邊距重疊的問題，讓第兩個div之間的間距變成35px，可以在div外面創建一個BFC，比如： ```html <div style="overflow:hidden"> <div class="child">這是第二個div</div> </div> ```  因為BFC是一個獨立的容器，容器內外互不影響，所以這里兩個div之間的間距就變成了35px。 ### 清除浮動 ```html <section id="father"> <style> #father { background-color: pink; } #father .child { font-size: 58px; float: left; } </style> <div class="child">這是一個浮動元素</div> </section> ```  子元素浮動后，父元素失去了高度，為了清除浮動帶來的這個影響可以將父元素設置成一個BFC： ```css #father { background-color: pink; overflow: auto; ```  因為BFC計算高度時，即使子元素是浮動元素也參與計算，所以這里的父元素高度就等于子元素高度而不是之前的 0 了。 ### 解決元素浮動后發生重疊的問題 ```html <section id="father"> <style> #father { background-color: red; } #father .left { background-color: pink; width: 100px; height: 100px; float: left; } #father .right { background-color: #ccc; height: 120px; } </style> <div class="left"></div> <div class="right"></div> </section> ```  如圖，左邊的元素浮動之后，由于脫離標準文檔流疊在了右邊的元素上，為了讓兩個元素不重疊，我們把右邊的元素設置成BFC： ```css #father .right { background-color: #ccc; height: 120px; overflow: hidden; } ```  因為BFC不會與浮動元素的盒子重疊，所以這里右邊的元素就不會疊在左邊的浮動元素下面了。 ******** [查看原文](https://blog.csdn.net/yshenhua/article/details/79485398)