css里的BFC的用法

jsbintask 發布于2019-08-02 10:58 / 2651人閱讀

摘要：的概念比較抽象，但通過實例分析，有助于我們對的理解。在此僅列舉了幾個例子，歡迎大家一起探索更多

一、對BFC的了解 Block Formatting Contexts (BFC，塊級格式化上下文)，就是一個塊級元素的渲染顯示規則 （可以把 BFC 理解為一個封閉的大箱子，，容器里面的子元素不會影響到外面的元素） 二、如何觸發BFC 只要元素滿足下面任一條件即可觸發 BFC 特性：

body 根元素；

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

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

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

overflow 除了visible以外的值 (hidden、auto、scroll)

三、BFC的布局規則 內部的盒子會在垂直方向，一個個地放置；

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

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

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

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

BFC的區域不會與float重疊；

BFC的應用 1、解決margin重疊問題 示例：

運行結果 解析：1和2margin重疊了；為了讓3不跟1，2一樣只用在3上面加一個overflow: hidden。 2、解決浮動高度塌陷問題 示例：

      


    
    
    
    BFC浮動問題
    


    
    
    Hello World!
    
    你好世界！

運行結果：

解析：第一幅圖是浮動塌陷了，為了解決這個問題只用在.one標簽上加上overflow: hidden; 三、解決侵占浮動元素的問題 示例：

1
2

運行結果：

解析：左邊第一幅圖是被浮動元素侵占，為了解決這個問題只用在.jfj標簽上加上overflow: hidden就可以; 總結：以上就是關于BFC的一些分析，BFC 是一種概念，是對前端布局技術的一種理論上的總結，掌握它可以讓我們在使用CSS +DIV進行布局時，知道一些特殊操作以及規避問題的原理。BFC的概念比較抽象，但通過實例分析，有助于我們對BFC的理解。 在此僅列舉了幾個例子，歡迎大家一起探索更多^_^

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

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

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

css里的BFC用法

摘要：里的用法，可以把理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。規則內部的盒子會在垂直方向，一個個地放置。 css里的BFC用法 BFC(Block Formatting Contexts)，可以把BFC理解為一個封閉的大箱子，容器里面的子元素不會影響到外面的元素。規則 1.內部的盒子會在垂直方向，一個個地放置。 2.BFC是頁面上的一個隔離的獨立容器，容器里面的子元素...

stefanieliang 2019-08-30 10:51 評論0 收藏0
css里的BFC的用法

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

ISherry 2019-08-29 16:06 評論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