應屆生都會的BFC

• BFC的通俗理解

  • Block Formatting Context(塊級格式化上下文)是W3C CSS 2.1規範中的一個概念 它決定了元素如何對其內容進行定位 以及與其它元素的的關係和相互做用 簡單來講 咱們能夠把它理解成 咱們在進行盒模型佈局的時候 若是一個元素符合成爲了BFC的條件 該元素成爲一個隔離了獨立容器 元素內部元素會垂直的沿着其父元素的邊框排列 和外部元素互不影響 好比浮動元素會觸發BFC 浮動元素內部的子元素主要受到該浮動元素的影響 而兩個浮動元素之間是互不影響的
  • 在CSS3中 BFC叫作Flow Root 在早期的的IE中也有相似的概念haslayout IE6丶7的不少佈局產生的bug (如3px的間隙丶絕對定位的繼承) 均可以經過觸發hasLayout修復 比較推薦的方法爲zoom:1和height:1% 不會破壞已有的樣式 相信你們對它並不陌生 一樣的以往集中在float丶絕對定位丶margin collaspe中的不少困惑 在理解了BFC後 都可以被咱們一一解除

• 觸發BFC的方法

  • float元素
  • position absolute fixed
  • display table-cell table-caption inline-block
  • overflow除了visible(hidden auto scroll)
  • fieldset元素
  • 早期的IE的hasLayout會觸發一個新的block formatting context

• BFC的特性

  • 邊緣不和浮動元素重疊(這個特性頗有用 由於元素觸發BFC的話 就不會被float元素覆蓋 當子元素徹底浮動的時候也可以正確地包含了)
  • 不存在collapsing margin問題(第二個不會疊加的特性 能夠理解爲兩個處理普通流的盒子 會有margin疊加的問題 是由於他們屬於相同的BFC 當它自身建立了新的BFC的時候 這個問題就不存在了)

• BFC的常見應用

  • 經過邊緣和不浮動元素重疊的特性 實現兩欄結構
  • 清除元素內部的浮動
  • 解決合併外邊距的問題

• 代碼示例

  • 解決margin塌陷

    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        margin-left: 100px;
        margin-top: 100px;
        width: 100px;
        height: 100px;
        background: black;
        
        overflow: hidden;
        /* display: inline-block; */
        /* position: absolute; */
        /* float: left; */
    }
    .content{
        margin-left: 50px;
        margin-top: 50px;
        width: 50px;
        height: 50px;
        background: green;
    }
    
    <div class="wrapper">
        <div class="content"></div>
    </div>
    複製代碼

  • 解決margin合併的問題

    .wrapper{
        overflow: hidden;
    }
    .demo1{
        background: red;
        margin-bottom: 100px;
    }
    .demo2{
        background: green;
        margin-top: 100px;
    }
    
    <div class="wrapper">
         <div class="demo1"></div>
    </div>
    <div class="wrapper">
         <div class="demo2"></div>
    </div>
    複製代碼

  • 解決元素內部浮動

    *{
        margin: 0;
        padding: 0;
    }
    .box{
        /* 2 建立BFC */
        overflow: hidden;
    
        margin-left: 50px;
        height: 100%;
        background: black;
    }
    .left{
        /* 1 */
        float: left;
    
        width: 200px;
        height: 200px;
        border: 3px solid #000;
        opacity: 0.5;
        background: green;
    }
    .right{
        /* 4 */
        overflow: hidden;
    
        width: 400px;
        min-height: 100px;
        border: 3px solid #000;
        opacity: 0.5;
        background: red;
    }
    .litter{
        /* 3 */
        float: left;
        margin: 10px;
        
        width: 50px;
        height: 50px;
        background: blue;
    }
    
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="litter"></div>
            <div class="litter"></div>
            <div class="litter"></div>
        </div>
    </div>
    複製代碼

• 你的點贊是我持續輸出的動力 但願能幫助到你們 互相學習 有任何問題下面留言 必定回覆