CSS 盒子模型边界塌陷和盒子塌陷

Question

网页布局中总会遇到很多莫名其妙的 BUG，但是对于我来说，似乎并不是什么难题，因为我已经写过了很多的网页了，这篇文章将给大家分享下 CSS 塌陷的问题。

边界塌陷

CSS 中存在一个 margin collapse，即边界塌陷或者说边界重叠。

并排 DIV 边界塌陷

对于上下两个并排的 DIV 块而言，上面 DIV 的 margin-bottom 和下面 DIV 的 margin-top 会塌陷，也就是会取上下两者 margin 里最大值作为显示值，所以我们当我们遇到上下两个并排 DIV 时，我们只需要设置其中一个的 margin 即可。

包含元素盒子塌陷

但对于父块 DIV 内含子块 DIV 的情况，就会按另一条 CSS 惯例来解释了，对于有块级子元素的元素计算高度的方式，如果元素没有垂直边框和填充，那其高度就是其子元素顶部和底部边框边缘之间的距离。例如下面的 HTML 代码：

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

father 这个 DIV 的高度为 0，因为里面没有能够撑开div的内容。

<div class="father">I am here.</div>

上面代码中，DIV 的高度就是文字的高度，因为此时文字在撑着这个 DIV。

总结：两个有外边距元素之间只要有 border、padding、行内元素或者间隙（clearanc），就不会塌陷。

盒子塌陷

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是 CSS 高度塌陷。

解决方法

1、最简单直接的方法就是盒子大小写死，给每个盒子设定固定的 width 和 height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。

2、给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

3、给父盒子添加 overflow 属性。

• overflow:auto 有可能出现滚动条，影响美观。
• overflow:hidden 可能会带来内容不可见的问题。

4、父盒子里最下方引入清除浮动块。最简单的有：

<br style="clear:both;"/>

有很多人是这么解决的，但是我们并不推荐，因为其引入了不必要的冗余元素 。

5、after 伪类清除浮动。

外部盒子的 after 伪元素设置 clear 属性。

#parent:after{
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

这是一种纯 CSS 的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决 CSS 盒子塌陷。

备注：上面中第五种方法虽好，但是对于低版本 IE 不兼容，具体选择哪种解决方法，可以根据实际情况决定，我使用最多的就是第三种方法，因为父级元素一般都不设置高度，这样也不存在滚动条或者内容不可见。