資訊專欄INFORMATION COLUMN
摘要：不起眼的這個詞可能之前沒怎么聽過，可是稍微接觸過前端的人都知道中有點小坑啊今天想要跟大家分享一下個人對于的一個理解。的定義是一個獨立的渲染區域，只有塊級元素參與，規定了內部的塊級元素如何布局，并與區域外部的毫不相干。
“不起眼”的BFC
BFC這個詞可能之前沒怎么聽過，可是稍微接觸過前端的人都知道css中有點小坑啊!!!!
今天想要跟大家分享一下個人對于BFC的一個理解。如有不足或理解錯誤的地方，還望各位大佬指出，哈哈，感激感激。要是喜歡的話，也不妨點個贊啊。
*1.BFC 的定義：
* **BFC** （**Block fomatting context**）：是一個獨立的渲染區域，只有塊級元素參與，規定了內部的塊級元素如何布局，并與區域外部的毫不相干。
*2.BFC 的創建：
overflow 的值不為visible
float 的值不為none
position 的值不為static
display 的值為inline-block、table-cell、table-caption（因為table會默認生成一個匿名的table-cell,而table-cell又會生成BFC）
*3.BFC應用
元素垂直方向上下重疊(margin大的值會覆蓋小的值，而不是兩值之和)
.box p {
margin: 10px 0;
background-color: yellow;
}
.box p:nth-child(1) {
margin-bottom: 25px;
}
效果如下：
解決方法：
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
效果如下：
解決侵占浮動元素的問題
.one {
width: 100px;
height: 100px;
background-color: pink;
}
.two {
height: 100px;
background-color: red;
width: 100px;
}
效果圖：
解決方法：
.one {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.two {
height: 100px;
background-color: red;
float: left;
width: 100px;
}
效果圖：
總而言之，BFC就是利用一個塊級元素，讓里面的元素不受外部元素的影響。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112800.html
摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...
摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...
摘要：最常見的有簡稱和簡稱。根據布局規則第四條的區域不會與重疊。根據布局規則第二條垂直方向的距離由決定。同樣的，當內部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經是一個耳聽熟聞的詞語了，網上有許多關于 BFC 的文章，介紹了如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...
閱讀 825·2021-11-22 11:59
閱讀 3230·2021-11-17 09:33
閱讀 2307·2021-09-29 09:34
閱讀 1940·2021-09-22 15:25
閱讀 1954·2019-08-30 15:55
閱讀 1320·2019-08-30 15:55
閱讀 529·2019-08-30 15:53
閱讀 3346·2019-08-29 13:55
