資訊專欄INFORMATION COLUMN
摘要：的特點是元素?fù)碛歇毩⒌匿秩緟^(qū)域元素內(nèi)部的內(nèi)容邊距浮動元素等不會影響到外部元素。
設(shè)置overflow屬性,值不為visible
設(shè)置float屬性,值不為none
設(shè)置position屬性,值為absolute或fixed
設(shè)置display屬性,值為inline-block, table-cell, table-caption, flex, inline-flex, grid,或者inline-grid
BFC的典型應(yīng)用場景: 解決塊級元素的塌陷問題(Collapsing)塊級元素的垂直塌陷: 當(dāng)兩個相鄰的塊級元素?fù)碛猩舷路较蛳噜彽倪吘鄷r(例如:上面的元素?fù)碛衜argin-bottom值,下面的元素?fù)碛衜argin-top值),此時上下元素之間的間隙不是兩者邊距之和,而是兩者之中的值較大的一個
塊級元素的包含塌陷: 當(dāng)塊級父元素沒有boder,padding值,塊級子元素有margin-top值時,子元素的margin-top值會在父元素的外部生效,也就是整個父元素區(qū)域會向下偏移,這個偏移值由子元素的margin-top值決定
此外,BFC還可以用于清除浮動帶來的影響等
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54062.html
摘要：的特點是元素?fù)碛歇毩⒌匿秩緟^(qū)域元素內(nèi)部的內(nèi)容邊距浮動元素等不會影響到外部元素。 BFC(Block Formatting Context)的特點是元素?fù)碛歇毩⒌匿秩緟^(qū)域,元素內(nèi)部的內(nèi)容(邊距,浮動元素等)不會影響到外部元素。 哪些情況下會觸發(fā)BFC 設(shè)置overflow屬性,值不為visible 設(shè)置float屬性,值不為none 設(shè)置position屬性,值為absolute或fi...
首先回顧一下普通流，普通流對后面進(jìn)一步了解BFC有很大的作用 普通流（Normal Flow） 普通流是網(wǎng)頁中元素的默認(rèn)排版，默認(rèn)情況下 塊級元素：以block flow direction排列（每一個塊級元素新起一行，即以從上往下以列排列） 行內(nèi)元素：不會另起一行，一個接一個排布，直到空間不足 脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...
摘要：當(dāng)一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間基于文檔流，理解定位模式相對定位，即相對于元素在文檔流中位置進(jìn)行偏移。絕對定位，即完全脫離文檔流，相對于屬性非值的最近父級元素進(jìn)行偏移。 主要參考文檔：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測試?yán)樱篽ttps...
? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點。今天我們來深入學(xué)習(xí)一下css布局相關(guān)的知識。 ? css布局篇已經(jīng)講個2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動等知識點。今天呢，我們把css布局篇做一個結(jié)尾，最后...
閱讀 1650·2021-09-26 09:55
閱讀 1383·2021-09-23 11:22
閱讀 2744·2021-09-06 15:02
閱讀 2652·2021-09-01 11:43
閱讀 3973·2021-08-27 13:10
閱讀 3688·2021-08-12 13:24
閱讀 2079·2019-08-30 12:56
閱讀 3005·2019-08-30 11:22
