BFC 块级格式化上下文

BFC

• BFC 是一个独立的渲染区域，内部元素的渲染不会影响外界

创建 BFC

• float 属性不是 none
• position 为 absolute 或者 fixed
• display 为 inline-block、table-cell、flex、table-caption或者inline-flex
• 块级元素 overflow 属性不是 visible

1. margin 重叠

• 属于同一个BFC的两个相邻的盒子会发生 margin 重叠，我们可以设置两个不同的BFC

  
  边距重叠

// html
    <p></p>
    <p></p>
// css
   html,body,div,p{
        margin: 0;
        padding: 0;
    }
    p {
        width: 100px;
        height: 100px;
        background: #eee;
    }

    p:nth-child(1) {
        margin-bottom: 100px;
    }

    p:nth-child(2) {
        margin-top: 50px;
    }
// 创建 BFC ------------------------
// html
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
// css
    html,body,div,p{
        margin: 0;
        padding: 0;
    }
    div{
        overflow: hidden; // 创建 BFC
    }
    p {
        width: 100px;
        height: 100px;
        background: #eee;
    }

    div:nth-child(1) p{
        margin-bottom: 100px;
    }

    div:nth-child(2) p{
        margin-top: 50px;
    }

2. 盒子塌陷，子元素设置 margin 值时，会影响父元素

盒子塌陷

// html
  <div class="box">
        <div></div>
  </div>
// css
    html,body,div,p{
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        background: #000;
        /* overflow: hidden;    // 防止盒子塌陷 */
    }

    .box div {
        width: 100px;
        height: 100px;
        background: #eee;
        margin-top: 100px;
    }

3. 浮动的子元素无法撑开父元素问题

问题3

// html
  <div class="box">
        <div></div>
  </div>
// css
    html,body,div,p{
        margin: 0;
        padding: 0;
    }
    .box{
        border: 1px solid #000;
        /* overflow: hidden; */ 
    }
    .box div{
        width: 100px;
        height: 100px;
        background: #eee;
        float: left;
    }

4. 同级元素环绕问题

问题4

// html
    <div>我是一个左浮动的元素</div>
    <div>我是一个没有设置浮动, 也没有触发 BFC 元素！我是一个没有设置浮动, 也没有触发 BFC 元素！我是一个没有设置浮动, 也没有触发 BFC 元素！</div>
// css
    html,body,div,p{
        margin: 0;
        padding: 0;
    }
    div:nth-child(1){
        width: 100px;
        height: 100px;
        float: left;
        background: #333;
        color: #fff;
    }
    div:nth-child(2){
        width: 200px; 
        height: 200px;
        background: #eee;
        /* overflow: hidden; */    // 创建 BFC
    }

5. 清除浮动

问题5

// html 
   <div>
       <p>1-1</p>
       <p>1-2</p>
   </div>
   <div>2</div>
// css
      html,body,div,p{
        margin: 0;
        padding: 0;
    }
    div:nth-child(1) p {
        width: 100px;
        height: 100px;
        float: left;
        background: #333;
        color: #fff;
    }

    div:nth-child(1) p:nth-child(1) {
        background: #666;
    }

    div:nth-child(2) {
        width: 200px;
        height: 200px;
        background: #eee;
        /* overflow: hidden; */
    }