CSS中的BFC詳解

一、何為BFC
BFC(Block Formatting Context)格式化上下文,是Web頁面中盒模型布局的CSS渲染模式,指一個獨立的渲染區(qū)域或者說是一個隔離的獨立容器。

二、形成BFC的條件
1、浮動元素,float 除 none 以外的值;
2、定位元素,position(absolute,fixed);
3、display 為以下其中之一的值 inline-block,table-cell,table-caption;
4、overflow 除了 visible 以外的值(hidden,auto,scroll);

三、BFC的特性
1.內(nèi)部的Box會在垂直方向上一個接一個的放置。
2.垂直方向上的距離由margin決定
3.bfc的區(qū)域不會與float的元素區(qū)域重疊。
4.計算bfc的高度時,浮動元素也參與計算
5.bfc就是頁面上的一個獨立容器,容器里面的子元素不會影響外面元素。

四 實例演示:

具體參考下面地址中的示例:
https://www.cnblogs.com/chen-cong/p/7862832.html

本文摘抄自https://www.cnblogs.com/chen-cong/p/7862832.html
作為學習筆記。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。