小編給大家分享一下CSS中BFC（塊級(jí)格式化上下文）的作用是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)專(zhuān)注于太谷企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),購(gòu)物商城網(wǎng)站建設(shè)。太谷網(wǎng)站建設(shè)公司,為太谷等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計(jì)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

定義

BFC全稱為block formatting context，意為塊級(jí)格式化上下文，是Web頁(yè)面中盒模型布局的css渲染模式。

可能上面的解釋看了有點(diǎn)懵逼，通俗的說(shuō)BFC指的的是一塊區(qū)域的布局， 這個(gè)區(qū)域的布局有一個(gè)顯著特點(diǎn)：這個(gè)區(qū)域內(nèi)的子元素?zé)o論使用何種布局、何種樣式都不會(huì)影響外部的元素。BFC比較常見(jiàn)的用法就是用來(lái)清除浮動(dòng)的影響，正常不清楚浮動(dòng)影響的情況下，父元素的高度是會(huì)坍塌的

那么什么時(shí)候會(huì)觸發(fā)BFC呢？滿足一下條件中任何一個(gè)：

• float的值不為none

• position的值不為static或者relate

• display的值為table-cell、table-caption、inline-block、flex或者inline-flex中的任意一個(gè)

• overflow的值不為visible

作用

清除浮動(dòng)

我們經(jīng)常會(huì)遇到這樣的情況：當(dāng)一個(gè)容器內(nèi)包含的子元素包含浮動(dòng)元素時(shí)，會(huì)導(dǎo)致容器沒(méi)有高度，人們常用一個(gè)偽類(lèi)，然后在偽類(lèi)中用clear屬性清除浮動(dòng)，其實(shí)可以通過(guò)定義一個(gè)BFC來(lái)達(dá)到同樣的目的，舉個(gè)例子：

<div class="container">
    <div></div>
    <div></div>
</div>

.container {
  width: 600px;
  background-color: black;
}
.container p {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: 10px;
  background-color: green;
}

當(dāng)子元素存在float屬性時(shí)，父容器沒(méi)有設(shè)置高度，父容器的高度就會(huì)塌陷，我們可以通過(guò)在父容器中加overflow:hidden創(chuàng)建一個(gè)BFC來(lái)解決這個(gè)問(wèn)題：

.container {
  width: 600px;
  background-color: black;
  overflow: hidden;  
}
.container p {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: 10px;
  background-color: green;
}

防止文字環(huán)繞

<div>
    <img src="../public/image/test.jpeg">
    <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>

img {
  float: left;
  width: 40px;
  height: 40px;
}

如上面例子所示，正常情況下我們期待的結(jié)果是左邊顯示圖片，右邊顯示文字描述，而不是上面展示的文字環(huán)繞在圖片周?chē)?，此時(shí)我們同樣可以通過(guò)創(chuàng)建一個(gè)BFC來(lái)解決這個(gè)問(wèn)題：

img {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
p {
  overflow: hidden;
}

防止外邊距折疊

常規(guī)文檔流中，子元素都是沿著父元素頂部開(kāi)始一個(gè)接著一個(gè)垂直擺放的，相鄰兄弟間的垂直間距由他們中間距最大的一個(gè)元素決定，而不是疊加在一起，這就是邊距折疊，舉個(gè)例子：

<div class="container">
    <p class="one">one</p>
    <p class="two">two</p>
</div>

.container {
  width: 200px;
  background-color: black;
}
p {
  width: 150px;
  background-color: green;
}
.one {
  margin: 10px 0;
}
.two {
  margin: 20px 0;
}

這種情況，我們可以通過(guò)創(chuàng)建一個(gè)新的BFC來(lái)解決

<div class="container">
  <p class="one">one</p>
  <div class="new">
    <p class="two">two</p>
  </div>
</div>

.container {
  width: 200px;
  background-color: black;
}
p {
  width: 150px;
  background-color: green;
}
.one {
  margin: 10px 0;
}
.two {
  margin: 20px 0;
}
.new {
  overflow: hidden;
}

看完了這篇文章，相信你對(duì)CSS中BFC（塊級(jí)格式化上下文）的作用是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)標(biāo)題：CSS中BFC（塊級(jí)格式化上下文）的作用是什么
網(wǎng)站路徑：http://aaarwkj.com/article10/jejsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、靜態(tài)網(wǎng)站、微信小程序、做網(wǎng)站、App開(kāi)發(fā)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)