塊格式化上下文(Block formatting contexts)

jerry 發(fā)布于2019-08-29 12:30 / 474人閱讀

摘要：浮動，絕對定位元素，非塊盒的塊容器例如，，和和不為的塊盒當該值已被傳播到視口時除外會為它們的內(nèi)容建立一個新的塊格式化上下文布局規(guī)則內(nèi)部盒會在垂直方向一個接一個的放置盒的垂直方向的距離由決定屬于同一個的兩個相鄰盒子的會發(fā)生重疊每個元素的

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和overflow不為visible的塊盒（當該值已被傳播到視口時除外（except when that value has been propagated to the viewport））會為它們的內(nèi)容建立一個新的塊格式化上下文

BFC布局規(guī)則:

BFC內(nèi)部盒會在垂直方向,一個接一個的放置

盒的垂直方向的距離由margin決定.屬于同一個BFC的兩個相鄰盒子的margin會發(fā)生重疊

每個元素的margin box的左邊,與包含塊border box的左邊相接觸(對于從左往右的格式化,否則相反).即使存在浮動也如此

BFC的區(qū)域不會與float box重疊(利用這個特性可以做自適應窗口大小)

BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素.反之也是如此

計算BFC高度時,浮動元素也參與計算(清除浮動的原理)

塊格式化上下文由以下之一創(chuàng)建:

根元素或其它包含它的元素

浮動(元素的float不是none)

絕對定位的元素(元素具有position為absolute或fixed)

行內(nèi)塊 inline-blocks(元素具有display:inline-block)

表格單元格(元素具有display:table-cell,表格單元格默認屬性)

表格標題(元素具有display:table-caption,表格標題默認屬性)

塊元素元素具有overflow值不是visible

彈性盒子flex boxes(元素具有display:flex或inline-flex)

display:flow-root

一個塊格式化上下文包括創(chuàng)建它的元素內(nèi)部所有內(nèi)容,除了會創(chuàng)建新的塊格式化上下文的元素

BFC與margin

BFC可以解決margin折疊問題,需要注意的是,overflow:hidden等屬性只在父子元素下起作用,相鄰兄弟元素無效

BFC與float

BFC可以改變float的覆蓋兄弟元素的問題,實現(xiàn)一側(cè)定寬的布局,還可以解決父元素塌陷問題

細說CSS中的BFC
學習格式化上下文

云服務(wù)器 GPU云服務(wù)器 format時間格式 linux給整塊磁盤格式化 linux格式化整塊硬盤 linux 格式化整塊硬盤

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111941.html

相關(guān)文章

BFC原理詳解

摘要：最常見的有簡稱和簡稱?？梢园阉斫獬墒且粋€獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局一.BFC是什么在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 評論0 收藏0
關(guān)于BFC的總結(jié)

摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結(jié)一下，加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結(jié)一下，加深一下認識吧。大家也可以關(guān)注我的GitHub后續(xù)的更新 1.BFC...

chadLi 2019-08-29 15:27 評論0 收藏0
關(guān)于BFC的總結(jié)

摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結(jié)一下，加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時候，還是感覺有點不知道怎么準確的表達，下面就翻翻文檔，總結(jié)一下，加深一下認識吧。大家也可以關(guān)注我的GitHub后續(xù)的更新 1.BFC...

oneasp 2019-08-02 10:28 評論0 收藏0
BFC-塊格式化上下文（block formatting context）

摘要：概念塊格式化上下文，是頁面塊級元素布局及浮動元素彼此交互的區(qū)域。阻止相鄰元素外邊距合并的方法被非空內(nèi)容或分隔開。不在一個普通流中或用分割開。讓在垂直方向上不毗鄰。 BFC概念 BFC（block formatting context）塊格式化上下文，是Web頁面塊級元素布局及浮動元素彼此交互的區(qū)域。BFC是一個獨立的布局環(huán)境，（實際頁面渲染時是不可見的），由BFC構(gòu)建的區(qū)域其內(nèi)部元素...

keithyau 2019-08-29 16:07 評論0 收藏0
視覺格式化模型(Visual formatting model)

摘要：塊級盒參與塊格式化上下文。行內(nèi)級盒參與行內(nèi)格式化上下文塊格式化上下文行內(nèi)格式化上下文相對定位浮動盒就是一個在當前行向左或向右移動的盒。浮動絕對定位絕對定位模型中，一個盒會有相對于其包含塊的明確偏移，它會從常規(guī)流中全部移除不會影響后面的兄弟。在可視化格式模型(Visual formatting model)當中,文檔樹中的每個元素根據(jù)其盒模型生成0個或多個盒.這些盒的布局由(以下因素)...

jokester 2019-08-30 15:53 評論0 收藏0
前端進階之什么是BFC？BFC的原理是什么？如何創(chuàng)建BFC？

摘要：官方說法就是它規(guī)定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內(nèi)盒子行內(nèi)級元素會生成行內(nèi)級盒子，該盒子同時會參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個值指定為，則其使用的值來自相等。作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

lowett 2019-08-30 15:44 評論0 收藏0