摘要:什么是塊格式化上下文,是頁面的可視化渲染的一部分,是塊盒子的布局過程發(fā)生的區(qū)域,也是浮動(dòng)元素與其他元素交互的區(qū)域。直譯過來是格式化上下文,它是頁面中的一塊渲染區(qū)域,有一套渲染規(guī)則,決定了其子元素如何布局,以及和其他元素之間的關(guān)系和作用。
在進(jìn)行html布局及css編寫的時(shí)候,你是否遇到過這樣的問題:
子元素設(shè)置浮動(dòng)脫離文檔流后,父元素?zé)o法將其完全包裹
子元素浮動(dòng)實(shí)現(xiàn)兩欄布局時(shí),另一個(gè)子元素與浮動(dòng)子元素重疊
垂直方向的外邊距margin重疊
...
通常我們使用塊級(jí)格式化上下文(BFC)就能解決。
什么是BFC?塊格式化上下文(Block Formatting Context,BFC) 是Web頁面的可視化CSS渲染的一部分,是塊盒子的布局過程發(fā)生的區(qū)域,也是浮動(dòng)元素與其他元素交互的區(qū)域。
FC(formatting context)直譯過來是格式化上下文,它是頁面中的一塊渲染區(qū)域,有一套渲染規(guī)則,決定了其子元素如何布局,以及和其他元素之間的關(guān)系和作用。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面的元素,并且容器元素不會(huì)影響兄弟元素的布局。
什么情況下會(huì)創(chuàng)建BFC根元素或包含根元素的元素
浮動(dòng)元素(元素的 float 不是 none)
絕對(duì)定位元素(元素的 position 為 absolute 或 fixed)
行內(nèi)塊元素(元素的 display 為 inline-block)
表格單元格(元素的 display為 table-cell,HTML表格單元格默認(rèn)為該值)
表格標(biāo)題(元素的 display 為 table-caption,HTML表格標(biāo)題默認(rèn)為該值)
匿名表格單元格元素(元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group(分別是HTML table、row、tbody、thead、tfoot的默認(rèn)屬性)或 inline-table)
overflow 值不為 visible 的塊元素
display 值為 flow-root 的元素(新方式,文末會(huì)提及)
contain 值為 layout、content或 strict 的元素
彈性元素(display為 flex 或 inline-flex元素的直接子元素)
網(wǎng)格元素(display為 grid 或 inline-grid 元素的直接子元素)
多列容器(元素的 column-count 或 column-width 不為 auto,包括 column-count 為 1)
column-span 為 all 的元素始終會(huì)創(chuàng)建一個(gè)新的BFC,即使該元素沒有包裹在一個(gè)多列容器中。
常見應(yīng)用場(chǎng)景 使父元素包含浮動(dòng)元素下面例子解釋如何讓浮動(dòng)內(nèi)容和父元素等高,清楚浮動(dòng)負(fù)面影響
html
I am a floated element.I am text inside the outer box.
css
.outer { border: 5px dotted rgb(214,129,137); border-radius: 5px; width: 450px; padding: 10px; margin-bottom: 40px; } .float { padding: 10px; border: 5px solid rgba(214,129,137,.4); border-radius: 5px; background-color: rgba(233,78,119,.4); color: #fff; float: left; width: 200px; margin: 0 20px 0 0; }
通過給左側(cè)文字設(shè)置向左浮動(dòng)實(shí)現(xiàn)文字環(huán)繞效果是很常見的做法,當(dāng)文本足夠長(zhǎng)時(shí),會(huì)看到如下效果,父元素可以完全包裹子元素。
但事實(shí)上,float中的文字已經(jīng)脫離文檔,如果文檔流文字過少,浮動(dòng)元素就會(huì)溢出父元素邊緣。
這時(shí)候?yàn)楦冈卦O(shè)置overflow: auto或者除invisible默認(rèn)值之外的任何有效值都能創(chuàng)建BFC解決這個(gè)問題,使父元素包含浮動(dòng)元素
.outer { overflow: auto; }BFC防止垂直外邊距重疊
外邊距折疊的規(guī)則是:當(dāng)兩個(gè)塊級(jí)元素相鄰并且在同一個(gè)塊級(jí)格式化上下文時(shí),它們垂直方向上的外邊距會(huì)產(chǎn)生重疊
html
I am paragraph one and I have a margin top and bottom of 20px
I am paragraph two and I have a margin top and bottom of 20px
css
.outer { background-color: #ccc; margin: 0 0 40px 0; } p { padding: 0; margin: 20px 0 20px 0; background-color: rgb(233,78,119); color: #fff; }
由于p元素的邊緣和外部div上的邊距之間沒有內(nèi)容,因此兩者將會(huì)合并,因此段落最終與框的頂部和底部齊平。我們?cè)诙温涞纳戏胶拖路娇床坏饺魏位疑H缦聢D:
當(dāng)父元素設(shè)置了BFC之后,父元素與子元素p重疊區(qū)域?qū)⒉辉俸喜?/p>
.outer { background-color: #ccc; margin: 0 0 40px 0; overflow: auto; }BFC防止文本環(huán)繞
依然像上面例子文字環(huán)繞效果的布局和樣式
html
I am a floated element.I am text...
css
.float{ float: left; }
這時(shí)候如果不想要右側(cè)文字環(huán)繞浮動(dòng)文字盒子,在左側(cè)div設(shè)置浮動(dòng)的情況下,我可以通過使右邊div成為BFC,使兩個(gè)兄弟div互相隔離、互不影響,從而達(dá)到去除文字環(huán)繞的效果。
.text { overflow: auto; }創(chuàng)建BFC的新方式
創(chuàng)建BFC的許多方法通常會(huì)帶來一些副作用,目前為止似乎最安全的就是overflow屬性,但某些情況下我們不需要滾動(dòng)條,此時(shí)滾動(dòng)條就變成了這種方式的副作用,因此display有個(gè)新的屬性flow-root可以在任何需要?jiǎng)?chuàng)建BFC場(chǎng)景下使用,它并且不會(huì)帶來任何副作用。
flow-root瀏覽器兼容情況:
瀏覽器對(duì)此值的支持是有限的,如果要在不支持flex或網(wǎng)格布局瀏覽器創(chuàng)建回退,了解BFC阻止浮動(dòng)元素的負(fù)面影響十分必要。
PS:更多前端資訊、技術(shù)干貨,請(qǐng)關(guān)注公眾號(hào)「前端新視界」
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/114641.html
摘要:什么是塊格式化上下文,是頁面的可視化渲染的一部分,是塊盒子的布局過程發(fā)生的區(qū)域,也是浮動(dòng)元素與其他元素交互的區(qū)域。直譯過來是格式化上下文,它是頁面中的一塊渲染區(qū)域,有一套渲染規(guī)則,決定了其子元素如何布局,以及和其他元素之間的關(guān)系和作用。 showImg(https://segmentfault.com/img/remote/1460000019193678); 在進(jìn)行html布局及cs...
摘要:下面我們就一步一步揭開的神秘面紗,深入理解盒模型,這對(duì)我們?cè)诓季稚蠒?huì)有一個(gè)質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。 css是一門具象語言,并不像js那樣具有邏輯性,因此,就算入行了前端很久的工程師,也覺得css難以掌握。下面我們就一步一步揭開css的神秘面紗,深入理解css盒模型,這對(duì)我們?cè)诓季稚蠒?huì)有一個(gè)質(zhì)的提升。 盒子模型 showImg(https://segmentfault....
摘要:當(dāng)一個(gè)元素從正常文檔流中抽出后,仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間基于文檔流,理解定位模式相對(duì)定位,即相對(duì)于元素在文檔流中位置進(jìn)行偏移。絕對(duì)定位,即完全脫離文檔流,相對(duì)于屬性非值的最近父級(jí)元素進(jìn)行偏移。 主要參考文檔:http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測(cè)試?yán)樱篽ttps...
摘要:視覺格式化模型是用來處理和在視覺媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則。匿名塊盒子在某些情況下進(jìn)行視覺格式化時(shí),需要添加一些增補(bǔ)性的盒子,這些盒子不能用選擇符選中,因此稱為匿名盒子。因此最好不要將其用于正式項(xiàng)目。 今日勵(lì)志 不論你在什么時(shí)候開始,重要的是開始之后不要停止。 前言 對(duì)于部分前端工程師來講,有時(shí)候CSS令他們很頭疼,明明設(shè)置了某個(gè)樣式,但是布局就是不起作用。 showImg(htt...
閱讀 2809·2021-10-08 10:04
閱讀 3198·2021-09-10 11:20
閱讀 523·2019-08-30 10:54
閱讀 3305·2019-08-29 17:25
閱讀 2301·2019-08-29 16:24
閱讀 884·2019-08-29 12:26
閱讀 1446·2019-08-23 18:35
閱讀 1930·2019-08-23 17:53