成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

神奇的BFC

GraphQuery / 879人閱讀

摘要：垂直方向的距離由決定。根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。因此會根據(jù)包含塊的寬度，和的寬度，自動變窄。效果如下清除內(nèi)部浮動根據(jù)布局規(guī)則第六條計算的高度時，浮動元素也參與計算。

概念 
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
生成BFC的元素

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

布局規(guī)則

內(nèi)部的Box會在垂直方向，一個接一個地放置。

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

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

BFC的區(qū)域不會與float box重疊。

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

計算BFC的高度時，浮動元素也參與計算

實例 自適應(yīng)兩欄布局

根據(jù)“每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。”， 所以元素布局如下：

雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。

根據(jù)BFC布局規(guī)則第四條：BFC的區(qū)域不會與float box重疊。我們可以通過通過觸發(fā)main生成BFC， 來實現(xiàn)自適應(yīng)兩欄布局。當觸發(fā)main生成BFC后，這個新的BFC不會與浮動的aside重疊。因此會根據(jù)包含塊的寬度，和aside的寬度，自動變窄。效果如下：

.main {
    overflow: hidden;
}

清除內(nèi)部浮動


根據(jù)BFC布局規(guī)則第六條：計算BFC的高度時，浮動元素也參與計算。為達到清除內(nèi)部浮動，我們可以觸發(fā)par生成BFC，那么par在計算高度時，par內(nèi)部的浮動元素child也會參與計算。

.par {
    overflow: hidden;
}

效果如下：

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

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

相關(guān)文章

  • BFC 神奇背后的原理（轉(zhuǎn)）

    摘要：最常見的有簡稱和簡稱。根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當內(nèi)部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經(jīng)是一個耳聽熟聞的詞語了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...

    April 評論0 收藏0

  • BFC 神奇背后的原理（轉(zhuǎn)）

    摘要：最常見的有簡稱和簡稱。根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當內(nèi)部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經(jīng)是一個耳聽熟聞的詞語了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...

    wawor4827 評論0 收藏0

  • CSS：BFC 最熟悉的陌生人

    摘要：就是神奇之一，它也是最熟悉的陌生人，因為你一不小心就會觸發(fā)它然而你并沒有意識到它正在神奇地發(fā)揮作用。最常見的有和，中還增加了和，這里就不深入研究了。其根本原理就是它們處于同一個，符合屬于同一個的兩個相鄰元素的會發(fā)生重疊的規(guī)則。 BFC，你也許聽過這個詞，但是你可能不是很有底氣地解釋清楚。寫樣式的時候，往往加了一個樣式或者改了一個屬性，就能達到你期望的效果，一切都是如此地神奇。BFC就是...

    focusj 評論0 收藏0

  • BFC

    摘要：垂直方向的距離由決定。屬于同一個的兩個相鄰的會發(fā)生重疊每個元素的的左邊，與包含塊的左邊相接觸對于從左往右的格式化，否則相反。的區(qū)域不會與重疊。計算的高度時，浮動元素也參與計算。剩下的一點間隙是的。當給形成一個，的高度就被撐開了。 前端精選文摘：BFC 神奇背后的原理小科普：到底什么是 BFC、IFC、GFC 和 FFC 一：BFC (Block Formatting Context)定...

    spacewander 評論0 收藏0

  • BFC--margin折疊和清除浮動

    摘要：背景以前在寫和的時候，兩個都設(shè)置了不同的上下值。它是決定塊盒子的布局及浮動元素相互影響的一個因素。創(chuàng)建根元素絕對定位元素為或的值不為的值為的值不為折疊屬于同一個的兩個相鄰的會發(fā)生折那如何阻止折疊呢，只要將其中一個創(chuàng)建新的就行了。 背景 以前在寫html和css的時候，兩個div都設(shè)置了margin不同的上下值。寫完后我開心的打開頁面，為毛兩個應(yīng)該隔的比較開的div，距離并不是我設(shè)置的m...

    zhangfaliang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<