資訊專欄INFORMATION COLUMN
摘要：實例從實例上可以看到，元素的外邊距會觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動元素發生了重疊。實例此時發現高度會重新被撐開，所以計算的高度浮動元素也會參與計算
BFC
首先BFC的英文全稱Block Format Context，也就是塊級格式化上下文。
BFC特性首先，我們大家都知道的BFC特性：
內部的元素會在垂直方向，從頂部一個接一個的放置
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此；
BFC的區域不會與float box重疊。
BFC就是頁面一個獨立的容器，容器里面的元素不會影響到外面的元素，反之亦然。
計算BFC的高度時，浮動元素也會參與計算
創建BFC方法下面也是大家都熟悉的創建BFC的方法
根元素
float不為none
overflow不為visible
display為table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最后一個為專門創建BFC的屬性
position為absolute,fixed
實例 實例1從實例1可以看到特性1，內部元素會從頂部一個接一個的放置，并且屬于同一個BFC的兩個相鄰的margin會發生重疊。如何解決邊距重疊的問題呢？此時我們需要給元素套上一個父元素，將父元素變成BFC。
實例
這樣便可以解決邊距重疊問題。
實例2從實例2上可以看到，元素的外邊距會觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動元素發生了重疊。
當右面元素觸發BFC的時候，不會與左面元素發生重疊，見實例
實例3當兩個子元素都進行浮動時，此時父元素的高度會消失，第六個特性，計算BFC的高度時，浮動元素也會參與計算，此時我們觸發父元素的BFC。實例
此時發現高度會重新被撐開，所以計算BFC的高度浮動元素也會參與計算
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113797.html
摘要：譯文理解中的塊級格式化上下文塊級格式化上下文是網頁視覺渲染的一部分，并用于決定塊盒子的布局。根據所言浮動絕對定位元素為或行內塊元素表格單元格表格標題以及屬性值不為的元素除了該值被傳播到視點的情況將創建一個新的塊級格式化上下文。 CSS > 譯文：理解CSS中的塊級格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...
摘要：期如何理解中定義塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。 20190416期 如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。 BFC 特性及應用 同一個...
閱讀 623·2023-04-26 02:08
閱讀 2654·2021-11-18 10:02
閱讀 3460·2021-11-11 16:55
閱讀 2341·2021-08-17 10:13
閱讀 2901·2019-08-30 15:53
閱讀 685·2019-08-30 15:44
閱讀 2545·2019-08-30 11:10
閱讀 1755·2019-08-29 16:57
