【CSS】从外边距塌陷引出——BFC 是什么？

什么是外边距塌陷？

 

举个例子🌰：

如下图，蓝色块是父级，灰色块是子级。

父级和子级之间，给子级上边的外边距，父级会跟着子级下来。

左图是塌陷，右图是期待的效果

   

 

重现代码：

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

.dad {
  width: 100px;
  height: 100px;
  background: red;
  border-top:1px solid; /* 这句不加就会塌陷 */
}
.son {
  width: 50px;
  height: 50px;
  margin-left: 50px;
  margin-top: 50px;
  background: green;
}

 

 

如何解决：

1、border-top：1px solid;（这个解决方法最好，但它其实并不是BFC，相当于加了一堵墙不让margin-top冲出去。下面的 2-6 都是BFC，虽然可以解决问题，但有一些副作用，很有可能会影响原来元素的功能，比如父元素本来不应该浮动，虽然你设置浮动之后解决margin塌陷但是使得元素本来的正常功能受到影响）

2、浮动元素（元素的 float 不是 none）

3、绝对定位元素（元素的 position 为 absolute 或 fixed）

4、行内块元素

5、overflow 值不为 visible 的块元素

6、弹性元素（display为 flex 或 inline-flex元素的直接子元素）