資訊專欄INFORMATION COLUMN
摘要：不起眼的這個詞可能之前沒怎么聽過，可是稍微接觸過前端的人都知道中有點小坑啊今天想要跟大家分享一下個人對于的一個理解。的定義是一個獨立的渲染區(qū)域，只有塊級元素參與，規(guī)定了內(nèi)部的塊級元素如何布局，并與區(qū)域外部的毫不相干。
“不起眼”的BFC
BFC這個詞可能之前沒怎么聽過，可是稍微接觸過前端的人都知道css中有點小坑啊!!!!
今天想要跟大家分享一下個人對于BFC的一個理解。如有不足或理解錯誤的地方，還望各位大佬指出，哈哈，感激感激。要是喜歡的話，也不妨點個贊啊。
*1.BFC 的定義：
* **BFC** （**Block fomatting context**）：是一個獨立的渲染區(qū)域，只有塊級元素參與，規(guī)定了內(nèi)部的塊級元素如何布局，并與區(qū)域外部的毫不相干。
*2.BFC 的創(chuàng)建：
overflow 的值不為visible
float 的值不為none
position 的值不為static
display 的值為inline-block、table-cell、table-caption（因為table會默認生成一個匿名的table-cell,而table-cell又會生成BFC）
*3.BFC應(yīng)用
元素垂直方向上下重疊(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就是利用一個塊級元素，讓里面的元素不受外部元素的影響。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112800.html
摘要：元素的特性全稱為，中文為塊級格式化上下文。應(yīng)用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設(shè)置個，另一個設(shè)置，此時兩個元素的就會發(fā)生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...
摘要：元素的特性全稱為，中文為塊級格式化上下文。應(yīng)用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設(shè)置個，另一個設(shè)置，此時兩個元素的就會發(fā)生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...
摘要：最常見的有簡稱和簡稱。根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。同樣的，當(dāng)內(nèi)部有浮動時，為了不影響外部元素的布局，計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經(jīng)是一個耳聽熟聞的詞語了，網(wǎng)上有許多關(guān)于 BFC 的文章，介紹了如何觸發(fā) BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BF...
閱讀 857·2021-11-22 11:59
閱讀 3272·2021-11-17 09:33
閱讀 2342·2021-09-29 09:34
閱讀 1977·2021-09-22 15:25
閱讀 1987·2019-08-30 15:55
閱讀 1345·2019-08-30 15:55
閱讀 561·2019-08-30 15:53
閱讀 3382·2019-08-29 13:55
