前言

經常在面試中被問到“如何清除浮動？”、“為什么 overflow: hidden 可以清除浮動？”等等比較基礎的問題。雖然這些題目案在各種寫面試題的文章中都有提供答案，但這種教科書式的問答肯定不是我們的目的，與其記住答案不如徹底掌握其核心原理——塊級格式化上下文（BFC）。

這篇文章主要就是徹底分析清楚BFC原理、總結BFC經典場景中的用法，最后再實踐分析解決布局中常遇到的問題。

本文首發自迪諾筆記，轉載請注明出處

一、BFC作用

• 清除浮動：BFC會包含創建它的元素內部的所有內容（包含浮動元素）
• 外邊距折疊：解決同一BFC容器中的相鄰元素間的外邊距折疊問題
• 左圖右文布局：利用浮動元產生BFC以及BFC之間不會互相覆蓋實現左圖右文布局

以上BFC的作用可以當做一次檢驗，思考下如何實現，本文后面將會有原理以及實現的講解

二、如何產生BFC

名稱如何產生備注html根元素html元素本身就是一個BFC元素記住就好，body元素不是BFC浮動元素元素的float屬性不是none常用絕對定位元素position屬性為absolute或fixed常用行內塊元素display屬性為inline-block常用表格元素表格元素默認display屬性即是BFC表格單元格、表格標題也是彈性元素display屬性為flex或inline-flex元素的直接子元素非常重要（flex布局常用）網格元素display屬性為grid或inline-grid元素的直接子元素新特性用得少多列容器元素的column-count或column-width不為auto，包括 column-count為1新特性用得少overflow屬性overflow屬性值不為visible的元素常用oveflfow：visibledisplay屬性display屬性值為flow-root的元素，flow-root: 一個新的display屬性的值，它可以創建無副作用的BFC用得少contain屬性contain屬性值為layout、content、paint的元素用得少

總結成一句話：凡脫離文檔流都可以產生BFC

三、BFC原理

三種文檔定位方式

在講BFC的原理之前先看看html文檔的三種定位方式

普通流

在普通流中，元素按照其在HTML中的先后位置自上而下布局，在這個過程中，行內元素水平排列，直到當行被占滿然后換行，塊級元素則會被渲染為完整的一個新行，除非另外指定，否則所有元素默認都是普通流定位，也就是說普通流中元素的位置由該元素在HTML文檔中的位置決定。

浮動

在浮動定位中，元素首先按照普通流的位置出現，然后根據浮動的方向盡可能的向左邊或右邊偏移，其效果與印刷排版中的文本環繞相似。

絕對定位

在絕對定位中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響，而元素具體的位置由絕對定位的坐標決定。

BFC產生作用的原因

其實BFC是上面三種布局方式中的普通流，BFC會產生一個獨立的容器，該容器內部的元素不會在布局上影響到外部的元素，在外部的普通流看來它和其他普通流元素無差別，文檔最終會按照上面說的普通流計算布局。

BFC的注意事項

塊格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用于同一個BFC內的元素。 浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。 外邊距折疊也只會發生在屬于同一BFC的塊級元素之間。

四、BFC常見用法

為了更好的理解BFC，我們先看看下面這些常見的用法。

清除浮動防止高度塌陷

按照上面三種定位方式中說的，浮動元素會脫離普通文檔流，導致外部元素的高度計算不包括浮動元素本身高度，形成高度塌陷。

<div class="container"><div class="box box1"></div> </div> .box {width: 20px;height: 50px;float: left; // 脫離了文檔流形成了一個BFCborder: 4px solid green; }

采用上述產生BFC元素的方法之一使外層元素產生BFC，可以防止元素高度塌陷。

.container {overflow: hidden; // 外層容器產生BFC }

處理外邊距折疊的問題

在普通文檔流中，元素（非BFC元素）的外邊距margin會自動折疊，產生如下現象。

<div class="container"><div class="box box1 m20"></div><div class="box box2 m20"></div> </div> .m20 {margin: 20px; } .box {border: 1px solid green; }

這個是html的特性不算bug，但是我們更希望margin不產生折疊效果，通過利用BFC元素之間的外邊距不會折疊的特性來實現。

<div class="container"><div class="box box1 m20"></div><div class="box box2 m20"></div> </div> .m20 {margin: 20px; } .box {overflow: hidden; // 使得兩個box成為BFC元素border: 4px solid green; }

使兩個box形成BFC或者分別用兩個BFC包裹box，然后形成的兩個BFC之間的外邊距不會折疊，修復后效果如下圖。

五、擴展一下

存在塊級格式化上下文BFC，則對應存在內聯格式化上下文IFC、網格格式化上下文GFC、自適應格式化上下文FFC，這些都可以統稱為格式化上下文。

IFC

內聯格式化上下文，IFC 的 line box（線框）高度由其包含行內元素中最高的實際高度計算而來，不受到豎直方向的 padding、margin 影響。

當在內聯元素中插入塊級元素會產生什么效果呢？在內聯元素中插入位置前后的內聯元素各自形成一個IFC，然后按照普通文檔流進行布局，效果如下圖。

GFC

網格布局格式化上下文（display: grid）

FFC

自適應格式化上下文（display: flex）

六、常見問題分析

為什么overflow: hidden可以清除浮動？

overflow: hidden使得外層元素產生了一個BFC，BFC的高度計算包含其內部的浮動元素，從而達到清除浮動效果<div style="border: 5px solid #6EBD91; overflow: hidden;"><div style="float: left; border: 5px solid #F4D491;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, maxime fuga assumenda excepturi, exercitationem rerum quae voluptates sunt perspiciatis cupiditate sed itaque officia, placeat minus iure quod expedita earum nam.Eum aliquam totam iure mollitia deserunt, minus repellendus. Harum ullam tenetur, impedit aliquam nobis ut dignissimos eligendi, expedita illum iste esse odio ab quos explicabo, odit architecto. Tempora, hic facilis?</div> </div>

效果如下：

分析過程

外層overflow: hidden的元素產生了一個BFC，本身float: left的元素也產生了一個BFC，外層BFC進行尺寸計算時包含內層BFC尺寸。

常用的clearfix清除浮動如何實現？

// 采用after偽元素實現 .clearfix::after {content: " ";display: block;height: 0;clear: both; } // 兼容IE6 .clearfix {zoom: 1; }

.clearfix類綁定到外層非浮動元素上，clear: both屬性確保外層元素在進行高度計算時包含內部浮動元素。

使用clearfix清除浮動的元素本身并未產生BFC，依靠的是CSS的clear屬性。即該元素若沒有其他屬性產生BFC時仍然按照普通文檔流進行定位，垂直外邊距還是存在折疊。

如何實現兩列自適應布局？

不考慮使用UI框架中的布局組件情況下，直接使用float: left + 固定左側寬度 + 右邊列margin-left<div><img style="float: left; width: 140px;" src="https://tva1.sinaimg.cn/large/00831rSTly1gcel7v9ji4j3041041wec.jpg" alt="logo"><div style="margin-left: 150px;"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eligendi numquam nihil excepturi sint reiciendis iusto maiores nostrum fugiat harum?</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, perspiciatis magnam consectetur corrupti suscipit a ratione sunt commodi beatae ad!</p></div> </div>

實現效果如下圖：

過程分析

左側部分使用float: left會產生一個BFC元素，這個BFC與右側塊級元素div一起進行普通流定位；由于是兩個按照普通流定位這個兩個元素之前不會產生覆蓋，即使不固定左側元素寬度和右側塊級元素給margin-left也可以實現效果（這里給寬度是為了控制左側固定尺寸）。

內聯元素中使用塊級元素會產生什么效果？

內聯元素中插入塊級元素會在插入的塊級元素前后各產生一個匿名塊與插入的塊按照普通流進行定位

內聯元素中使用插入浮動元素會產生什么效果？

內聯元素使用了display: inline-block會產生一個IFC，其內部的浮動會在內部進行浮動定位，然后整個IFC看成一個塊級元素與外部進行文檔流定位<span style="display: inline-block; background-color: #6EBD91;">Lorem ipsum dolor sit amet.<span style="float: left; background-color: chocolate;">Lorem, ipsum.</span><div style="background-color: #F4D491;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat labore, ipsa quo possimus mollitia, officiis quia provident inventore placeat nulla, rem velit ratione ducimus. Facilis eos repudiandae debitis quam voluptatem.</div>Lorem ipsum dolor sit amet consectetur. </span>

效果如下：

以上效果可以在線預覽

參考文章

• MDN-格式化上下文
• MDN-clear
• gihtub-介紹下BFC及其應用
• 知乎專欄-10分鐘理解BFC原理

寫在最后

既然看到這里了不妨點個贊鼓勵下作者唄 :)
作者博客：https://blog.lessing.online/
作者github：https://github.com/johniexu

總結

以上是生活随笔為你收集整理的bfc是什么_全面分析总结BFC原理及实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。