溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“CSS中BFC的作用是什么”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“CSS中BFC的作用是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
定義
BFC全稱為blockformattingcontext，意為塊級格式化上下文，是Web頁面中盒模型布局的css渲染模式。
可能上面的解釋看了有點懵逼，通俗的說BFC指的的是一塊區(qū)域的布局，這個區(qū)域的布局有一個顯著特點：這個區(qū)域內(nèi)的子元素無論使用何種布局、何種樣式都不會影響外部的元素。BFC比較常見的用法就是用來清除浮動的影響，正常不清楚浮動影響的情況下，父元素的高度是會坍塌的
那么什么時候會觸發(fā)BFC呢？滿足一下條件中任何一個：
float的值不為none
position的值不為static或者relate
display的值為table-cell、table-caption、inline-block、flex或者inline-flex中的任意一個
overflow的值不為visible
作用
清除浮動
我們經(jīng)常會遇到這樣的情況：當一個容器內(nèi)包含的子元素包含浮動元素時，會導致容器沒有高度，人們常用一個偽類，然后在偽類中用clear屬性清除浮動，其實可以通過定義一個BFC來達到同樣的目的，舉個例子：
<divclass="container">
<div></div>
<div></div>
</div>
.container{
width:600px;
background-color:black;
}
.containerp{
float:left;
width:200px;
height:200px;
margin-left:10px;
background-color:green;
}
讀到這里，這篇“CSS中BFC的作用是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
