前端_BFC相关问题

BFC是什么？

Block Formatting Context (块级格式化上下文)
BFC的子元素不会对外面的元素产生影响

怎么触发BFC？

float: left | right;
overflow: hidden | scroll | auto; 非 visible;
display: inline-block | table | table-cell | table-caption | flex | grid; 非block 非none 非inline;
position: absolute | fixed; 非 relative;

BFC解决的问题

① margin 重合

** html部分**

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

css部分

    .box {
      width: 100px;
      height: 100px;
    }
    .box1 {
      margin-bottom: 20px;
      background-color: lightblue;
    }
    .box2 {
      margin-top: 20px;
      background-color: lightgreen;
    }

** 结果 **

出现的问题：两个方块之间只有20px。

解决

** html部分**

  <div class="father">
    <div class="box box1"></div>
  </div>
  <div class="father">
    <div class="box box2"></div>
  </div>

css部分

    .father {
      overflow: hidden;
    }
    .box {
      width: 100px;
      height: 100px;
    }
    .box1 {
      margin-bottom: 20px;
      background-color: lightblue;
    }
    .box2 {
      margin-top: 20px;
      background-color: lightgreen;
    }

**结果 **

两个方块之间变成40px。

**②margin塌陷 **

** html部分**

  <div class="father">
    <div class="son"></div>
  </div>

css部分

    .father {
      width: 100px;
      height: 100px;
      background-color: lightpink;
    }
    .son {
      width: 50px;
      height: 50px;
      margin-top: 50px;
      background-color: lightgreen;
    }

** 结果**

出现的问题：父元素和子元素一起下移50px。

解决

html部分

  <div class="father">
    <div class="son"></div>
  </div>

css部分

    .father {
      /* display: inline-block; */
      /* position: absolute; */
      /* float: left; */
      width: 100px;
      height: 100px;
      background-color: lightpink;
      /* 还可以 */
      border-top: 1px solid transparent;
    }
    .son {
      width: 50px;
      height: 50px;
      margin-top: 50px;
      background-color: lightgreen;
    }

结果

只有子元素下移50px。

③高度坍塌

html部分

  <div class="father">
    <div class="son"></div>
  </div>

css部分

    .father {
      /* 父元素没有设置高度 */
      width: 100px;
      border: 1px solid #000;
      background-color: lightcoral;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

**结果 **

**出现的问题：父元素没有设置高度，子元素因为浮动，没有撑开父元素了，父元素的高度消失了。 **

解决

html部分

  <div class="father">
    <div class="son"></div>
  </div>

**css部分 **

    .father {
      /* position: absolute; */
      /* float: left; */
      /* display: inline-block; */
      overflow: hidden;
      width: 100px;
      border: 1px solid #000;
      background-color: lightcoral;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

结果

父元素的高度被子元素撑开了。