溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css中BFC有什么作用”，在日常操作中，相信很多人在css中BFC有什么作用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css中BFC有什么作用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
什么是BFC（BlockFormattingContext）
Formattingcontext(格式化上下文)是W3CCSS2.1規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。
而BlockFormattingContexts(BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。具有BFC特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且BFC具有普通容器所沒有的一些特性。
BFC的布局規則如下：
  1.內部的盒子會在垂直方向，一個個地放置；
  2.BFC是頁面上的一個隔離的獨立容器；
  3.屬于同一個BFC的兩個相鄰Box的上下margin會發生重疊；
  4.計算BFC的高度時，浮動元素也參與計算
  5.每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
  6.BFC的區域不會與float重疊；
那么如何觸發BFC呢？只要元素滿足下面任一條件即可觸發BFC特性：
body根元素；
浮動元素：float不為none的屬性值；
絕對定位元素：position(absolute、fixed)
display為：inline-block、table-cells、flex
overflow除了visible以外的值(hidden、auto、scroll)
BFC到底有什么用呢？
塊格式化上下文對于定位與清除浮動很重要。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。
1、同一個BFC下外邊距會發生折疊
也就是說，兩個相鄰的普通流中的塊元素垂直方向上的margin會折疊。
<style>
.p{
width:200px;
height:50px;
margin:100px0;
background-color:red;
}
</style>
<body>
<divclass="p"></div>
<divclass="p"></div>
</body>
這里兩個p的外邊距為100px，而不是200px。之所以發生外邊距折疊，是因為他們同屬于body這個根元素。
利用BFC可以消除MarginCollapse
BFC導致了margincollapse，而現在又要用它來解決margincllapse.但是始終要記住一點：只有當元素在同一個BFC中時，垂直方向上的margin才會clollpase.如果它們屬于不同的BFC，則不會有margincollapse.因此我們可以再建立一個BFC去阻止margincollpase的發生。
<divclass="p"></div>
<divclass="wrap">
<divclass="p"></div>
</div>
.wrap{
overflow:hidden;
}
.p{
width:200px;
height:50px;
margin:100px0;
background-color:red;
}
2、BFC可以包含浮動的元素（清除浮動）
正常情況下，浮動的元素會脫離普通文檔流，使父元素高度坍塌。即外層的p會無法包含內部浮動的p。
<divstyle="border:1pxsolid#000;">
<divstyle="width:50px;height:50px;background:#eee;float:left;">
</div>
</div>
但如果我們觸發外部容器的BFC，根據BFC規范中的第4條：計算BFC的高度時，浮動元素也參與計算，那么外部p容器就可以包裹著浮動元素。
<divstyle="border:1pxsolid#000;overflow:hidden">
<divstyle="width:100px;height:100px;background:#eee;float:left;"></div>
</div>
3、BFC可以阻止元素被浮動元素覆蓋/（兩欄布局）
到此，關于“css中BFC有什么作用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
