BFC很神奇

折叠问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 100px;
        background-color: red;
        margin-bottom: 20px;
      }
      .box2 {
        /* 
        在bfc中,两个相邻的block,它的margin会进行折叠.
        解决折叠问题:
        因为box1和box2在html的bfc中,只要将某个box包裹在其他的块级元素内,并且包裹的块级元素设置overflow属性值除visable之外的值就能解决折叠问题.(让box1和box2不在同一个bfc中,不在同一个bfc就能解决折叠问题)
         */
        margin-top: 30px;
        width: 200px;
        height: 100px;
        background-color: orange;
      }
      .content {
        overflow: auto; /*加入overflow会形成新的BFC*/
      }
    </style>
  </head>
  <body>
    <!-- 
    fc: 所有的盒子(inline,inline-block,block)属于一个fc(格式化上下文)
    block level box 属于bfc
    inline,inline-block level box 属于ifc
   -->
    <div class="box1"></div>
    <div class="box2"></div>

    <p>解决之后:</p>

    <div class="content">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>

    <img
      src="../../images/创建bfc.png"
      alt=""
      style="width: 700px; height: 300px"
    />
  </body>
</html>

高度坍塌

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        background-color: orange;

        /* 第二种解决方案 */
        overflow: auto; /*形成新的bfc*/
        /*
          满足: 形成新的独立的bfc + 高度为auto(content的高度为auto),高度计算如下
          1.行内级: 行高
          2.块级: 上边缘与底层的距离
          3.有绝对定位直接忽略 absolute
          4.是浮动元素,bfc会增加高度达到浮动元素的下边缘
         */
      }
      .item {
        width: 500px;
        height: 200px;
        border: 1px solid red;
        /*  
        浮动元素会脱标 父元素不知道子元素的高度 所以颜色显示不出来(定位也是这样)
        */
        float: left;
      }
      /* 第一种方案解决高度坍塌 */
      /* .clear_float::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      } */
    </style>
  </head>
  <body>
    <div class="content clear_float">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

深入理解BFC

BFC很神奇

折叠问题

高度坍塌