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