20170601-BFC(塊級格式化上下文)

PAMPANG 發布于2019-08-29 12:41 / 724人閱讀

摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導致父元素高度為的問題。

BFC

BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(display屬性為inline-block、table、table-cell、table、table-caption)、帶有overflow屬性(該屬性值不為visible和inherit)的display為block的塊級元素會在其內部建立新的塊級格式化上下文。

BFC的作用：

元素們處于同一個塊級格式化上下文時，會遵守相同的規則/格式(例如父子元素的margin會重疊)，但是處于不同的塊級格式化上下文時，元素的排列展示遵守的規則/格式是不同的(處于不同的BFC的父子元素的margin不會重疊--->父級元素處于一個BFC中，父級元素內部新建一個BFC)

生成BFC:

設置浮動

設置絕對定位

設置display屬性為inline-block、table、table-cell、table-caption

設置overflow屬性為 hidden、auto、scroll(不能設置為visible和inherit)

BFC的實際應用：

父子元素的margin-top、margin-bottom會折疊，在父元素內部生成新的BFC，可以阻止父子元素的margin-top、margin-bottom重疊

BFC可以阻止文字圍繞浮動元素的情況：下圖中的例子中，需要在block02元素內部生成新的BFC，使得block02內部的文字不圍繞浮動元素

使用浮動元素可能會出現父容器高度為0的現象，在父容器內部生成新的BFC可以解決該問題

總結：

給塊級元素設置某些屬性，會在其內部產生新的BFC(塊級格式化上下文)，處于相同的BFC的元素會遵守相同的規則/格式。使用BFC可以解決以下問題：父子元素的上下margin合并問題、文字圍繞浮動元素的問題和子元素浮動導致父元素高度為0的問題。

GPU云服務器云服務器電腦上下載的視頻怎么轉換格式塊級流中塊級 html默認塊級

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112074.html

20170601-BFC(塊級格式化上下文)

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

weknow619 2019-08-01 16:56 評論0 收藏0
視覺格式化模型(Visual formatting model)

摘要：塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文塊格式化上下文行內格式化上下文相對定位浮動盒就是一個在當前行向左或向右移動的盒。浮動絕對定位絕對定位模型中，一個盒會有相對于其包含塊的明確偏移，它會從常規流中全部移除不會影響后面的兄弟。在可視化格式模型(Visual formatting model)當中,文檔樹中的每個元素根據其盒模型生成0個或多個盒.這些盒的布局由(以下因素)...

jokester 2019-08-30 15:53 評論0 收藏0
CSS盒模型

box model showImg(https://segmentfault.com/img/bVtyKC?w=746&h=455); Margin Border Padding Content width 指定content box 的寬度百分數相對于父容器(包含塊)的content box的寬度只有包含塊的高度不依賴該元素時，百分比寬度才生效 paddi...

fish 2019-08-30 15:52 評論0 收藏0
深究盒模型的margin合并問題

摘要：即我們常說的脫離文檔流的元素。如果一個元素不是流外的，即仍在文檔流中的元素，就叫流內元素。兩個兄弟盒之間的豎直距離由屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直會合并。如果盒的和相鄰，那么可能會被徹底合并。 1.首先，了解一些詞匯 - 流內元素? 如果一個元素是浮動的，絕對定位的或者是根元素，那么它就是流外元素。即我們常說的脫離文檔流的元素。如果一個元素不是流外的，即仍在文檔...

cyqian 2019-08-29 13:47 評論0 收藏0
BFC，包含塊，文檔流，浮動，定位是個啥關系---CSS視覺格式化模型

摘要：視覺格式化模型瀏覽器在解析渲染我們所寫的內容，順序渲染普通文檔流。渲染結果如下圖這兒有一個知識點文檔流按我的理解就是在瀏覽器渲染顯示的一個模式，這個模式的特點自上而下，從左到右排列規則。如果不特殊指定，瀏覽器會默認當前的渲染是按文檔流模式。 CSS視覺格式化模型瀏覽器在解析渲染我們所寫的html內容，順序渲染（普通文檔流）。 1 2 3 4 ...

huashiou 2019-08-30 15:55 評論0 收藏0