css里的BFC用法

stefanieliang 發布于2019-08-30 10:51 / 1840人閱讀

摘要：里的用法，可以把理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。規則內部的盒子會在垂直方向，一個個地放置。

css里的BFC用法

BFC(Block Formatting Contexts)，可以把BFC理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。

規則

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

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

3.屬于同一個BFC的兩個相鄰BOx的上下margin會發生重疊

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

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

6.BFC的區域不會與float重疊；

哪些元素會觸發BFC

1.body根元素

2.浮動元素：float不為none的屬性值；

3.絕對定位元素：position（absolute、fixed）

4.display為：inline-block、table-cell、flex

5.overflow除了visible以外的值（hidden、auto、scroll）

BFC的應用

1.解決margin重疊問題

2.解決浮動高度塌陷問題

3.解決侵占浮動元素的問題

例：

1.margin重疊問題

我們先定義兩個垂直的div

css

    .box{
            width: 200px;
            height: 50px;
            margin: 30px 0;
            background: black;
        }

margin重疊后的效果

這滿足規則第三條：
屬于同一個BFC的兩個相鄰BOx的上下margin會發生重疊
說明兩者屬于同一個BFC，所以我們將兩個div放到不同的BFC中，為第二個div套上一個父元素，然后通過設置overflow hidden來激活BFC

css

     .content{
            overflow: hidden;
        }

效果圖為：

**再來看看浮動高度塌陷問題
**

css

      .content{
            width:300px; 
            border:1px solid black; 
        }

        .content .box{
            width:100px;
            height:100px;
            border:1px solid red;   
            float:left;
        }

效果圖為：

能夠看到父元素沒有被撐開，BFC規則第四條：
計算BFC的高度時，浮動元素也參與計算
所以我們要將父元素觸發BFC

    .content{
            width:300px; 
            border:1px solid black; 

            overflow: hidden;
        }

效果圖為：

能都看到父元素已經撐開了。

再來看看侵占浮動元素的問題

先定義兩個div：

css

    .left{
            width: 100px;
            height: 100px;
            background: salmon;

            float: left;
        }

        .right{
            width: 300px;
            height: 200px;
            background: black;
        }

效果圖為：

滿足了規則第五點：
每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此

所以我們要將紅色區域撐到黑色區域的左邊，就需利用規則第六條
BFC的區域不會與float重疊
我們給黑色區域right設置一個 overflow: hidden; 屬性來觸發BFC；

.right{
            width: 300px;
            height: 200px;
            background: black;


            overflow: hidden;
        }

效果圖為:

能夠看到紅色區域已經撐到黑色區域的左邊

如果，您認為閱讀這篇博客讓你有些收獲，請您關注一下。感謝您的支持，如有不足，請多指教。

聯系方式：

wx：bsl521921

GPU云服務器云服務器 java里的.css php中css的用法 bfc bfc布局

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

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

css里的BFC的用法

摘要：的概念比較抽象，但通過實例分析，有助于我們對的理解。在此僅列舉了幾個例子，歡迎大家一起探索更多一、對BFC的了解 Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則（可以把 BFC 理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素）二、如何觸發BFC 只要元素滿足下面任一條件即可觸發 BFC 特性： ...

ISherry 2019-08-29 16:06 評論0 收藏0
css里的BFC的用法

摘要：的概念比較抽象，但通過實例分析，有助于我們對的理解。在此僅列舉了幾個例子，歡迎大家一起探索更多一、對BFC的了解 Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則（可以把 BFC 理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素）二、如何觸發BFC 只要元素滿足下面任一條件即可觸發 BFC 特性： ...

jsbintask 2019-08-02 10:58 評論0 收藏0
CSS里的BFC和IFC的用法

摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。（可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...

ityouknow 2019-08-02 16:17 評論0 收藏0
CSS里的BFC和IFC的用法

摘要：行寬的高度為包含框的高度，高度為行框中最高元素的高度。行框的寬度容納不下子元素時，子元素會換到下一行顯示，并且會產生新的行框。一、BFC Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則。（可以把 BFC 理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素）。 1、BFC的布局規則例如以下： ①.內...

BaronZhang 2019-08-30 10:51 評論0 收藏0