前端_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;
    }

---

结果

 

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