摘要:它是頁(yè)面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。一個(gè)的范圍包含創(chuàng)建該上下文元素的所有子元素,但不包括創(chuàng)建了新的子元素的內(nèi)部元素。
走在前端的大道上
本篇將自己讀過(guò)的相關(guān) 盒模型BFC 文章中,對(duì)自己有啟發(fā)的章節(jié)片段總結(jié)在這(會(huì)對(duì)原文進(jìn)行刪改),會(huì)不斷豐富提煉總結(jié)更新。
一.常見(jiàn)定位方案在講 BFC 之前,我們先來(lái)了解一下常見(jiàn)的定位方案,定位方案是控制元素的布局,有三種常見(jiàn)方案:
普通流 (normal flow)
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在這個(gè)過(guò)程中,行內(nèi)元素水平排列,直到當(dāng)行被占滿(mǎn)然后換行,塊級(jí)元素則會(huì)被渲染為完整的一個(gè)新行,除非另外指定,否則所有元素默認(rèn)都是普通流定位,也可以說(shuō),普通流中元素的位置由該元素在 HTML 文檔中的位置決定。
浮動(dòng) (float)
在浮動(dòng)布局中,元素首先按照普通流的位置出現(xiàn),然后根據(jù)浮動(dòng)的方向盡可能的向左邊或右邊偏移,其效果與印刷排版中的文本環(huán)繞相似。
絕對(duì)定位 (absolute positioning)
在絕對(duì)定位布局中,元素會(huì)整體脫離普通流,因此絕對(duì)定位元素不會(huì)對(duì)其兄弟元素造成影響,而元素具體的位置由絕對(duì)定位的坐標(biāo)決定。
二、BFC 概念Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。常見(jiàn)的FC有BFC、IFC,還有GFC和FFC。
那么 BFC 是什么呢?
BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文),它屬于上述定位方案的普通流。
一個(gè)BFC的范圍 包含創(chuàng)建該上下文元素的所有子元素,但不包括創(chuàng)建了新BFC的子元素的內(nèi)部元素。這從另一方角度說(shuō)明,一個(gè)元素不能同時(shí)存在于兩個(gè)BFC中。因?yàn)槿绻粋€(gè)元素能夠同時(shí)處于兩個(gè)BFC中,那么就意味著這個(gè)元素能與兩個(gè)BFC中的元素發(fā)生作用,就違反了BFC的隔離作用。
具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器,容器里面的元素不會(huì)在布局上影響到外面的元素,并且 BFC 具有普通容器所沒(méi)有的一些特性。
通俗一點(diǎn)來(lái)講,可以把 BFC 理解為一個(gè)封閉的大箱子,箱子內(nèi)部的元素?zé)o論如何翻江倒海,都不會(huì)影響到外部。
三、布局規(guī)則內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置
每個(gè)元素的左外邊距與包含塊的左邊界相接觸(從左向右),即使浮動(dòng)元素也是如此。(這說(shuō)明BFC中子元素不會(huì)超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界)
屬于同一個(gè)BFC的 兩個(gè)相鄰Box的 上下margin會(huì)發(fā)生折疊;
BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊(阻止元素被浮動(dòng)元素覆蓋)
計(jì)算BFC的高度時(shí),浮動(dòng)子元素也參與計(jì)算(清除內(nèi)部浮動(dòng))
四、觸發(fā) BFC只要元素滿(mǎn)足下面任一條件即可觸發(fā) BFC 特性:
body 根元素
浮動(dòng)元素:float 除 none 以外的值,如left、right
絕對(duì)定位元素:position (absolute、fixed)
display 為 inline-block、table-cells、flex
overflow 除了 visible 以外的值 ,如hidden、auto、scroll
注意:有些文章中說(shuō)HTML可以觸發(fā)BFC,沒(méi)有說(shuō)body,按照上邊介紹的一個(gè)BFC的范圍和下邊的案例1 來(lái)看,HTML能不能觸發(fā)不確定,但是body是可以的
五、BFC的特性及應(yīng)用 1.普通流中兩個(gè)相鄰的塊元素 垂直方向上的 margin會(huì)折疊效果圖是:
發(fā)生外邊距折疊,是因?yàn)樗麄?同屬于 body這個(gè)根元素
讓 它們 不屬于同一個(gè)BFC,就能避免外邊距折疊:
效果圖是:
2.普通流中 父子嵌套關(guān)系的2個(gè)塊元素 垂直方向上的 margin會(huì)折疊然后,我們給子元素添加一個(gè)margin-top: 50px時(shí)
.son { width: 100px; height: 100px; background: red; margin-top: 50px; }
我們神奇的發(fā)現(xiàn)父子元素同時(shí)"掉下來(lái)了50px",如圖所示
3.BFC可以包含浮動(dòng)的元素(清除浮動(dòng))正常情況下,浮動(dòng)的元素會(huì)脫離普通文檔流,所以下面的代碼里:
外層的div會(huì)無(wú)法包含 內(nèi)部浮動(dòng)的div,效果見(jiàn)下圖:
但如果我們 觸發(fā)外部容器的BFC,根據(jù)BFC規(guī)范 計(jì)算BFC的高度時(shí),浮動(dòng)元素也參與計(jì)算,那么外部div容器就可以包裹著浮動(dòng)元素,所以只要把代碼修改如下:
就可以完成以下效果:
4.實(shí)現(xiàn)2欄自適應(yīng)布局要求左側(cè)固定300px,右側(cè)自適應(yīng)的布局
leftright
原理:BFC元素不會(huì)和浮動(dòng)的元素重疊
參考文章:
10 分鐘理解 BFC 原理
CSS中重要的BFC
淺析CSS里的 BFC 和 IFC
前端人人都應(yīng)該理解的盒模型BFC渲染機(jī)制
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/117233.html
摘要:如圖所示如果你眼力不錯(cuò)或者親自試試會(huì)發(fā)現(xiàn)個(gè)之間設(shè)置了的距離但是他們現(xiàn)在實(shí)際的間距卻是。如何設(shè)置盒模型的類(lèi)型通過(guò)的就可以設(shè)置為盒模型了默認(rèn)是盒模型渲染機(jī)制基本慨念是英文縮寫(xiě)翻譯為塊級(jí)格式化上下文。說(shuō)白了就是一種盒模型的渲染規(guī)則。 前端人人都要懂的盒模型BFC渲染機(jī)制 為什么我們說(shuō),前端工程師有必要需要了解BFC渲染機(jī)制? 因?yàn)槿绻阋粋€(gè)前端壓根沒(méi)聽(tīng)說(shuō)過(guò)BFC,那你是如何理解下面這幾個(gè)cs...
摘要:并且這種過(guò)程遵循標(biāo)準(zhǔn)的描述只要不是和絕對(duì)定位方式布局的,都在普通流里面。定位相對(duì)定位在普通流之中,是相對(duì)于它在普通流中的位置中進(jìn)行移動(dòng),元素占據(jù)原來(lái)位置絕對(duì)定位脫離普通流,不占據(jù)空間相對(duì)于距離它最近的那個(gè)已定位的祖先相對(duì)絕對(duì)元素決定的。 視覺(jué)格式化模型 頁(yè)面(文檔樹(shù))可以想象成是由一個(gè)個(gè)的Box組合而成的,而視覺(jué)格式化模型(Visual formatting model)是一套規(guī)則,將...
摘要:提供了糟糕的支持,而雖然接近標(biāo)準(zhǔn),但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問(wèn)題,但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問(wèn)題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁(yè)。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開(kāi)始,一步步涉及一些常見(jiàn)的前端筆試和面試點(diǎn) 主要參考自第一篇文章,然而筆者在讀的時(shí)...
摘要:中各種布局的背后,實(shí)質(zhì)上是各種的組合。相反,一些塊容器盒,比如非替換行內(nèi)塊及非替換表格單元格,不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒,用于表示一行。彈性容器外和彈性項(xiàng)目?jī)?nèi)的一切元素都不受影響。 CSS中各種布局的背后,實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...
閱讀 1014·2021-09-30 09:58
閱讀 2847·2021-09-09 11:55
閱讀 2007·2021-09-01 11:41
閱讀 1002·2019-08-30 15:55
閱讀 3362·2019-08-30 12:50
閱讀 3506·2019-08-29 18:37
閱讀 3310·2019-08-29 16:37
閱讀 2021·2019-08-29 13:00