資訊專欄INFORMATION COLUMN
摘要：的特點是元素擁有獨立的渲染區域元素內部的內容邊距浮動元素等不會影響到外部元素。
設置overflow屬性,值不為visible
設置float屬性,值不為none
設置position屬性,值為absolute或fixed
設置display屬性,值為inline-block, table-cell, table-caption, flex, inline-flex, grid,或者inline-grid
BFC的典型應用場景: 解決塊級元素的塌陷問題(Collapsing)塊級元素的垂直塌陷: 當兩個相鄰的塊級元素擁有上下方向相鄰的邊距時(例如:上面的元素擁有margin-bottom值,下面的元素擁有margin-top值),此時上下元素之間的間隙不是兩者邊距之和,而是兩者之中的值較大的一個
塊級元素的包含塌陷: 當塊級父元素沒有boder,padding值,塊級子元素有margin-top值時,子元素的margin-top值會在父元素的外部生效,也就是整個父元素區域會向下偏移,這個偏移值由子元素的margin-top值決定
此外,BFC還可以用于清除浮動帶來的影響等
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114866.html
摘要：的特點是元素擁有獨立的渲染區域元素內部的內容邊距浮動元素等不會影響到外部元素。 BFC(Block Formatting Context)的特點是元素擁有獨立的渲染區域,元素內部的內容(邊距,浮動元素等)不會影響到外部元素。 哪些情況下會觸發BFC 設置overflow屬性,值不為visible 設置float屬性,值不為none 設置position屬性,值為absolute或fi...
首先回顧一下普通流，普通流對后面進一步了解BFC有很大的作用 普通流（Normal Flow） 普通流是網頁中元素的默認排版，默認情況下 塊級元素：以block flow direction排列（每一個塊級元素新起一行，即以從上往下以列排列） 行內元素：不會另起一行，一個接一個排布，直到空間不足 脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...
摘要：當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間基于文檔流，理解定位模式相對定位，即相對于元素在文檔流中位置進行偏移。絕對定位，即完全脫離文檔流，相對于屬性非值的最近父級元素進行偏移。 主要參考文檔：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測試例子：https...
? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。 ? css布局篇已經講個2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動等知識點。今天呢，我們把css布局篇做一個結尾，最后...
閱讀 3025·2023-04-25 20:22
閱讀 3343·2019-08-30 11:14
閱讀 2595·2019-08-29 13:03
閱讀 3183·2019-08-26 13:47
閱讀 3226·2019-08-26 10:22
閱讀 1271·2019-08-23 18:26
閱讀 618·2019-08-23 17:16
閱讀 1912·2019-08-23 17:01
