css里的BFC的用法

ISherry 發(fā)布于2019-08-29 16:06 / 455人閱讀

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

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

body 根元素；

浮動(dòng)元素：float 不為none的屬性值；

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

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

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

三、BFC的布局規(guī)則 內(nèi)部的盒子會(huì)在垂直方向，一個(gè)個(gè)地放置；

BFC是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然

屬于同一個(gè)BFC的兩個(gè)相鄰Box的上下margin會(huì)發(fā)生重疊；

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

每個(gè)元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動(dòng)也是如此；

BFC的區(qū)域不會(huì)與float重疊；

BFC的應(yīng)用 1、解決margin重疊問題 示例：

運(yùn)行結(jié)果 解析：1和2margin重疊了；為了讓3不跟1，2一樣只用在3上面加一個(gè)overflow: hidden。 2、解決浮動(dòng)高度塌陷問題 示例：

      


    
    
    
    BFC浮動(dòng)問題
    


    
    
    Hello World!
    
    你好世界！

運(yùn)行結(jié)果：

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

1
2

運(yùn)行結(jié)果：

解析：左邊第一幅圖是被浮動(dòng)元素侵占，為了解決這個(gè)問題只用在.jfj標(biāo)簽上加上overflow: hidden就可以; 總結(jié)：以上就是關(guān)于BFC的一些分析，BFC 是一種概念，是對(duì)前端布局技術(shù)的一種理論上的總結(jié)，掌握它可以讓我們?cè)谑褂肅SS +DIV進(jìn)行布局時(shí)，知道一些特殊操作以及規(guī)避問題的原理。BFC的概念比較抽象，但通過實(shí)例分析，有助于我們對(duì)BFC的理解。 在此僅列舉了幾個(gè)例子，歡迎大家一起探索更多^_^