css 塊級格式化上下文（BFC）

J4ck_Chan 發布于2019-08-29 16:06 / 513人閱讀

摘要：一塊級格式化上下文什么是塊級格式化上下文，塊級格式化上下文就是一個塊級元素的渲染顯示規則可以把理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素觸發的條件如下根元素的值不為。

一、塊級格式化上下文（BFC） 1、什么是塊級格式化上下文？

    Block Formatting Contexts (BFC，塊級格式化上下文)就是一個塊級元素 的渲染顯示規則
  （可以把 BFC 理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素）

2、觸發BFC的條件如下：

根元素

float的值不為none。

overflow 除了 visible 以外的值（hidden，auto，scroll）

display的值為table-cell, table-caption, inline-block中的任何一個。

絕對定位元素：position (absolute、fixed)

彈性盒 flex boxes (元素的 display: flex 或 inline-flex)

3、BFC 的布局規則：

內部的盒子會在垂直方向，一個個地放置；

BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然

屬于同一個BFC的兩個相鄰Box的上下margin會發生重疊；

計算BFC的高度時，浮動元素也參與計算

每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；

BFC的區域不會與float重疊；

4、BFC特性

1.同一BFC下外邊距會發生折疊：

代碼如下：




    
    外邊距折疊
    
    


    
    
        上下100margin
        
        上下100margin

效果圖：

第一個div的下邊距和第二個div的上邊距發聲了重疊，所以兩個盒子之間距離只有100px，而不是200px。

解決方法：

放在不同的BFC下

代碼如下：




    
    外邊距折疊
    
    


    
        
            上下100margin
        
        
            上下100margin

效果圖：

這次我們可以清晰的看清兩個中間是200px；并沒用重疊。

2、BFC可以包含浮動的元素（清除浮動）

代碼如下：

效果圖：

由于容器內元素浮動，脫離了文檔流，所以容器只剩下 2px 的邊距高度。如果使觸發容器的 BFC，那么容器將會包裹著浮動元素。

代碼如下：

3、侵占浮動元素的問題

代碼如下：




    
    高度塌陷
    
    


    

            浮動
    

            
        
            
            
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！

效果圖：

解決方法：
通過觸發btm2的BFC解決
代碼如下：




    
    高度塌陷
    
    


    

            浮動
    
    
        
            
        
            
            
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！

效果圖：

持續更新，歡迎大家指教！

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

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

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

十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

suxier 2019-08-30 15:53 評論0 收藏0
BFC原理詳解

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

ziwenxie 2019-08-29 11:10 評論0 收藏0
前端進階之什么是BFC？BFC的原理是什么？如何創建BFC？

摘要：官方說法就是它規定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內盒子行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文的創建。如果只有一個值指定為，則其使用的值來自相等。作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

lowett 2019-08-30 15:44 評論0 收藏0
CSS > 譯文：理解CSS中的塊級格式化上下文

摘要：譯文理解中的塊級格式化上下文塊級格式化上下文是網頁視覺渲染的一部分，并用于決定塊盒子的布局。根據所言浮動絕對定位元素為或行內塊元素表格單元格表格標題以及屬性值不為的元素除了該值被傳播到視點的情況將創建一個新的塊級格式化上下文。 CSS > 譯文：理解CSS中的塊級格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...

LancerComet 2019-08-28 18:13 評論0 收藏0
CSS中重要的BFC

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

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