CSS BFC特性(塊級格式化上下文)

岳光發布于2019-08-30 15:55 / 3750人閱讀

摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。

1、元素的BFC特性

BFC全稱為”Block Formartting Context”，中文為”塊級格式化上下文”。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，
它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相互作用。

BFC布局規則：

1）bfc內部的元素會在垂直方向，一個接一個地放置
2）盒子垂直方向的距離有margin決定，屬于同一個bfc的兩個相鄰元素的margin會發生重疊
3）每個盒子的左外邊緣(margin-left)會與其父元素的左邊緣(border-left)相接觸
4）bfc的區域會通過變窄來自適應而不會與float元素重疊在一起
5）bfc的高度計算時，浮動元素也參與計算。即創建了新的bfc的元素的高度會把內部浮動元素的高度也算進去
6）bfc是頁面上一個隔離的獨立容器，容器內的子元素不會影響到外面的元素；同理容器內的子元素也不會影響到父元素外面的
其他元素。

創建BFC的條件：

a）html元素
b）float的值不為none
c）overflow的值為auto、hidden或scroll
d）display的值為table-cell、inline-block、table-caption、flex、inline-flex
e）position的值不為relative和static

2、BFC作用----理解BFC(個人理解)

1、因為bfc內部的元素與外部的元素絕對不會互相影響，因此當bfc元素的兄弟元素有浮動時，它不應該影響bfc內部元素的布局，
所以bfc會通過變窄來自適應，而不會與浮動元素發生重疊；

2、同樣的，當bfc內部有浮動時，為了不影響外部元素的布局，bfc計算高度時會把浮動元素的高度也計算進去。
利用bfc避免margin重疊也是同樣的道理。

3、BFC應用之：利用bfc特性實現左側不固定，右側也不固定的布局

圖片來自：張鑫旭--粉絲群第1期CSS小測點評與答疑
如圖：這種布局在移動端一般比較常見，左側文字寬度不固定，右測文字寬度不固定，文字斷行后也要保持同樣的行距。在移動端中可以使用flex布局，grid布局，如果不使用css3布局，我們能否實現呢？答案是可以的，可以使用 浮動+bfc 特性！




    手機系統
    Android
    登錄方式
    QQ互聯登錄
    綁定事件
    2019-01-02 00:01
    其他
    FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf
    備注
    如果需要修改綁定，請聯系HR進行修改！

下圖是dd創建了bfc與未創建bfc的對比：

由圖片可以看出，創建了bfc的dd的寬度自適應的變窄了，而未創建bfc的dd卻與浮動的dt重合了。

4、BFC應用之：利用bfc特性解決margin塌陷問題

margin塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個margin-bottom，另一個設置margin-top，此時兩個元素的margin就會發生重疊。
margin重疊規則：

1）margin的值都為正數時，取它們之間較大的值
2）margin的值都為負數時，取兩個margin絕對值中較大的值
3）兩個margin一正一負時，取兩個margin相加的和

margin塌陷與不塌陷效果：




    
        margin未塌陷
        margin: 20px 0;
        margin: 20px 0;
    
    
        margin塌陷
        margin: 20px 0;
        
            margin: 20px 0;

6、參考文章

1、https://www.zhangxinxu.com/wo... (引導文章)
2、https://www.zhangxinxu.com/wo...
3、https://www.w3cplus.com/css/u...
4、https://blog.csdn.net/w362427...
5、https://blog.csdn.net/shadow_...

GPU云服務器云服務器忽略css特性電腦上下載的視頻怎么轉換格式格式化css文件 css格式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117271.html

BFC原理詳解

摘要：最常見的有簡稱和簡稱。可以把它理解成是一個獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據布局規則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局一.BFC是什么在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 評論0 收藏0
CSS BFC特性(塊級格式化上下文)

摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...

chanthuang 2019-08-02 14:09 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

shixinzhang 2019-08-29 16:34 評論0 收藏0
關于CSS里BFC特性的理解和應用

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規則。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規范中的一個概念...

vspiders 2019-08-02 11:24 評論0 收藏0
CSS中重要的BFC

摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

plus2047 2019-08-29 14:20 評論0 收藏0