亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

神奇的BFC

GraphQuery / 930人閱讀

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

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

根元素

float屬性不為none

position為absolute或fixed

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

overflow不為visible

布局規(guī)則

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

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

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

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

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

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

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

雖然存在浮動(dòng)的元素aslide，但main的左邊依然會(huì)與包含塊的左邊相接觸。

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

.main {
    overflow: hidden;
}

清除內(nèi)部浮動(dòng)


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

.par {
    overflow: hidden;
}

效果如下：

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113114.html

相關(guān)文章

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

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

    April 評(píng)論0 收藏0

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

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

    wawor4827 評(píng)論0 收藏0

  • CSS：BFC 最熟悉的陌生人

    摘要：就是神奇之一，它也是最熟悉的陌生人，因?yàn)槟阋徊恍⌒木蜁?huì)觸發(fā)它然而你并沒(méi)有意識(shí)到它正在神奇地發(fā)揮作用。最常見(jiàn)的有和，中還增加了和，這里就不深入研究了。其根本原理就是它們處于同一個(gè)，符合屬于同一個(gè)的兩個(gè)相鄰元素的會(huì)發(fā)生重疊的規(guī)則。 BFC，你也許聽(tīng)過(guò)這個(gè)詞，但是你可能不是很有底氣地解釋清楚。寫(xiě)樣式的時(shí)候，往往加了一個(gè)樣式或者改了一個(gè)屬性，就能達(dá)到你期望的效果，一切都是如此地神奇。BFC就是...

    focusj 評(píng)論0 收藏0

  • BFC

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

    spacewander 評(píng)論0 收藏0

  • BFC--margin折疊和清除浮動(dòng)

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

    zhangfaliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<