【轉(zhuǎn)】BFC-塊級(jí)格式化上下文

wuaiqiu 發(fā)布于2019-08-29 12:24 / 2078人閱讀

摘要：一布局規(guī)則內(nèi)部的會(huì)在垂直方向排列。屬于同一個(gè)的兩個(gè)相鄰的會(huì)發(fā)生重疊。每個(gè)元素的的左邊，與包含塊的左邊相接觸。計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。因此會(huì)根據(jù)包含塊的寬度，和的寬度，自動(dòng)變窄。

BFC它是一個(gè)獨(dú)立的渲染區(qū)域，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

一、BFC布局規(guī)則：

1、內(nèi)部的Box會(huì)在垂直方向排列。
2、Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
3、每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸。
4、BFC的區(qū)域不會(huì)與float box重疊。
5、BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
6、計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

二、哪些元素會(huì)生成BFC?

1、根元素
2、float屬性不為none
3、position為absolute或fixed
4、display為inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不為visible

三、BFC的作用及原理

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

BFC

當(dāng)觸發(fā)main生成BFC后（去掉代碼中注釋即可），這個(gè)新的BFC不會(huì)與浮動(dòng)的aside重疊。因此會(huì)根據(jù)包含塊的寬度，和aside的寬度，自動(dòng)變窄。效果如下

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

BFC

為達(dá)到清除內(nèi)部浮動(dòng)，我們可以觸發(fā)par生成BFC（去掉代碼中注釋即可），那么par在計(jì)算高度時(shí)，par內(nèi)部的浮動(dòng)元素child也會(huì)參與計(jì)算。效果如下

防止垂直 margin 重疊

BFC

Haha

Hehe

我們可以在p外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC（去掉代碼中注釋即可）。那么兩個(gè)P便不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了。效果如下

GPU云服務(wù)器云服務(wù)器電腦上下載的視頻怎么轉(zhuǎn)換格式 bfc 快轉(zhuǎn)視頻格式 bfc布局

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111873.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 2019-08-29 12:56 評(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 2019-08-01 17:07 評(píng)論0 收藏0
20170601-BFC(塊級(jí)格式化上下文)

摘要：的全稱是塊級(jí)格式化上下文。浮動(dòng)絕對(duì)定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級(jí)元素會(huì)在其內(nèi)部建立新的塊級(jí)格式化上下文。使用可以解決以下問(wèn)題父子元素的上下合并問(wèn)題文字圍繞浮動(dòng)元素的問(wèn)題和子元素浮動(dòng)導(dǎo)致父元素高度為的問(wèn)題。 BFC BFC的全稱是Block Format Content -- 塊級(jí)格式化上下文。浮動(dòng)、絕對(duì)定位的元素(absolute、fixed定位)、塊容器(...

PAMPANG 2019-08-29 12:41 評(píng)論0 收藏0
20170601-BFC(塊級(jí)格式化上下文)

摘要：的全稱是塊級(jí)格式化上下文。浮動(dòng)絕對(duì)定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級(jí)元素會(huì)在其內(nèi)部建立新的塊級(jí)格式化上下文。使用可以解決以下問(wèn)題父子元素的上下合并問(wèn)題文字圍繞浮動(dòng)元素的問(wèn)題和子元素浮動(dòng)導(dǎo)致父元素高度為的問(wèn)題。 BFC BFC的全稱是Block Format Content -- 塊級(jí)格式化上下文。浮動(dòng)、絕對(duì)定位的元素(absolute、fixed定位)、塊容器(...

weknow619 2019-08-01 16:56 評(píng)論0 收藏0
塊級(jí)格式化上下文(BFC)

摘要：可以阻止元素被浮動(dòng)元素覆蓋浮動(dòng)元素的塊級(jí)兄弟元素會(huì)無(wú)視浮動(dòng)元素的位置，盡量占滿一整行，這樣就會(huì)被浮動(dòng)元素覆蓋，為該兄弟元素觸發(fā)后可以阻止這種情況的發(fā)生。一、什么是BFC 具有BFC屬性的元素也屬于普通流定位方式，與普通容器沒(méi)有什么區(qū)別，但是在功能上，具有BFC的元素可以看做是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且具有普通容器沒(méi)有的一些特性，比如包含浮動(dòng)元素...

TerryCai 2019-08-29 15:22 評(píng)論0 收藏0