當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

bfc是什么_全面分析总结BFC原理及实践

發(fā)布時(shí)間：2023/12/2 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 bfc是什么_全面分析总结BFC原理及实践小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

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

這篇文章主要就是徹底分析清楚BFC原理、總結(jié)BFC經(jīng)典場(chǎng)景中的用法，最后再實(shí)踐分析解決布局中常遇到的問(wèn)題。

本文首發(fā)自迪諾筆記，轉(zhuǎn)載請(qǐng)注明出處

一、BFC作用

清除浮動(dòng)：BFC會(huì)包含創(chuàng)建它的元素內(nèi)部的所有內(nèi)容（包含浮動(dòng)元素）
外邊距折疊：解決同一BFC容器中的相鄰元素間的外邊距折疊問(wèn)題
左圖右文布局：利用浮動(dòng)元產(chǎn)生BFC以及BFC之間不會(huì)互相覆蓋實(shí)現(xiàn)左圖右文布局

以上BFC的作用可以當(dāng)做一次檢驗(yàn)，思考下如何實(shí)現(xiàn)，本文后面將會(huì)有原理以及實(shí)現(xiàn)的講解

二、如何產(chǎn)生BFC

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

總結(jié)成一句話：凡脫離文檔流都可以產(chǎn)生BFC

三、BFC原理

三種文檔定位方式

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

普通流

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

浮動(dòng)

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

絕對(duì)定位

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

BFC產(chǎn)生作用的原因

其實(shí)BFC是上面三種布局方式中的普通流，BFC會(huì)產(chǎn)生一個(gè)獨(dú)立的容器，該容器內(nèi)部的元素不會(huì)在布局上影響到外部的元素，在外部的普通流看來(lái)它和其他普通流元素?zé)o差別，文檔最終會(huì)按照上面說(shuō)的普通流計(jì)算布局。

BFC的注意事項(xiàng)

塊格式化上下文對(duì)浮動(dòng)定位與清除浮動(dòng)都很重要。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素。浮動(dòng)不會(huì)影響其它BFC中元素的布局，而清除浮動(dòng)只能清除同一BFC中在它前面的元素的浮動(dòng)。外邊距折疊也只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間。

四、BFC常見(jiàn)用法

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

清除浮動(dòng)防止高度塌陷

按照上面三種定位方式中說(shuō)的，浮動(dòng)元素會(huì)脫離普通文檔流，導(dǎo)致外部元素的高度計(jì)算不包括浮動(dòng)元素本身高度，形成高度塌陷。

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

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

.container {overflow: hidden; // 外層容器產(chǎn)生BFC }

處理外邊距折疊的問(wèn)題

在普通文檔流中，元素（非BFC元素）的外邊距margin會(huì)自動(dòng)折疊，產(chǎn)生如下現(xiàn)象。

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

這個(gè)是html的特性不算bug，但是我們更希望margin不產(chǎn)生折疊效果，通過(guò)利用BFC元素之間的外邊距不會(huì)折疊的特性來(lái)實(shí)現(xiàn)。

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

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

五、擴(kuò)展一下

存在塊級(jí)格式化上下文BFC，則對(duì)應(yīng)存在內(nèi)聯(lián)格式化上下文IFC、網(wǎng)格格式化上下文GFC、自適應(yīng)格式化上下文FFC，這些都可以統(tǒng)稱(chēng)為格式化上下文。

IFC

內(nèi)聯(lián)格式化上下文，IFC 的 line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來(lái)，不受到豎直方向的 padding、margin 影響。

當(dāng)在內(nèi)聯(lián)元素中插入塊級(jí)元素會(huì)產(chǎn)生什么效果呢？在內(nèi)聯(lián)元素中插入位置前后的內(nèi)聯(lián)元素各自形成一個(gè)IFC，然后按照普通文檔流進(jìn)行布局，效果如下圖。

GFC

網(wǎng)格布局格式化上下文（display: grid）

FFC

自適應(yīng)格式化上下文（display: flex）

六、常見(jiàn)問(wèn)題分析

為什么overflow: hidden可以清除浮動(dòng)？

overflow: hidden使得外層元素產(chǎn)生了一個(gè)BFC，BFC的高度計(jì)算包含其內(nèi)部的浮動(dòng)元素，從而達(dá)到清除浮動(dòng)效果<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>

效果如下：

分析過(guò)程

外層overflow: hidden的元素產(chǎn)生了一個(gè)BFC，本身float: left的元素也產(chǎn)生了一個(gè)BFC，外層BFC進(jìn)行尺寸計(jì)算時(shí)包含內(nèi)層BFC尺寸。

常用的clearfix清除浮動(dòng)如何實(shí)現(xiàn)？

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

.clearfix類(lèi)綁定到外層非浮動(dòng)元素上，clear: both屬性確保外層元素在進(jìn)行高度計(jì)算時(shí)包含內(nèi)部浮動(dòng)元素。

使用clearfix清除浮動(dòng)的元素本身并未產(chǎn)生BFC，依靠的是CSS的clear屬性。即該元素若沒(méi)有其他屬性產(chǎn)生BFC時(shí)仍然按照普通文檔流進(jìn)行定位，垂直外邊距還是存在折疊。

如何實(shí)現(xiàn)兩列自適應(yīng)布局？

不考慮使用UI框架中的布局組件情況下，直接使用float: left + 固定左側(cè)寬度 + 右邊列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>

實(shí)現(xiàn)效果如下圖：

過(guò)程分析

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

內(nèi)聯(lián)元素中使用塊級(jí)元素會(huì)產(chǎn)生什么效果？

內(nèi)聯(lián)元素中插入塊級(jí)元素會(huì)在插入的塊級(jí)元素前后各產(chǎn)生一個(gè)匿名塊與插入的塊按照普通流進(jìn)行定位

內(nèi)聯(lián)元素中使用插入浮動(dòng)元素會(huì)產(chǎn)生什么效果？

內(nèi)聯(lián)元素使用了display: inline-block會(huì)產(chǎn)生一個(gè)IFC，其內(nèi)部的浮動(dòng)會(huì)在內(nèi)部進(jìn)行浮動(dòng)定位，然后整個(gè)IFC看成一個(gè)塊級(jí)元素與外部進(jìn)行文檔流定位<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>