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