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

創(chuàng)新互聯(lián)公司服務(wù)項目包括靜海網(wǎng)站建設(shè)、靜海網(wǎng)站制作、靜海網(wǎng)頁制作以及靜海網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，靜海網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到靜海省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

定義

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

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

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

• float的值不為none

• position的值不為static或者relate

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

• overflow的值不為visible

作用清除浮動

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

<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è)置高度，父容器的高度就會塌陷，我們可以通過在父容器中加overflow:hidden創(chuàng)建一個BFC來解決這個問題：

.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)繞在圖片周圍，此時我們同樣可以通過創(chuàng)建一個BFC來解決這個問題：

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

防止外邊距折疊

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

<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;
}

這種情況，我們可以通過創(chuàng)建一個新的BFC來解決

<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;
}

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

當(dāng)前名稱：CSS中BFC（塊級格式化上下文）的作用是什么-創(chuàng)新互聯(lián)
文章分享：http://jinyejixie.com/article18/dcgddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、小程序開發(fā)、移動網(wǎng)站建設(shè)、網(wǎng)站改版、Google、靜態(tài)網(wǎng)站

廣告

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