CSS高度塌陷问题

css中的高度塌陷是关于浮动的常见问题
比如，在盒子嵌套的模型中，子盒子浮动脱标，当子盒子的高度超出父盒子的高度时，父盒子高度会发生塌陷，导致整个模型混乱。

<style>
        .d1{
            width: 100px;
            background-color: black;
        }
        .d2{
            float: left;
            width: 50px;
            height: 150px;
            background-color: red;
        }
    </style>

	-------------
	<div class="d1">
        <div class="d2"></div>
    </div>

如上的盒子嵌套，子盒子脱标之后无法撑起父盒子的高度，父盒子在页面上将塌陷无显示。

高度塌陷的解决办法：清除浮动

1. 内墙法，即在父元素中额外的添加一个盒子，给盒子设定样式为：clear: both。w3c推荐的方式;

.d3{
            clear: both;
        }
  <div class="d1">
        <div class="d2"></div>
        <div class="d3"></div>
    </div>

在盒子模型中添加了一个样式为clear：both的盒子，可以消除浮动造成的塌陷。
2. 父元素添加：overflow: hidden;
在父元素的样式中添加overflow：hidden；
3. 双伪元素浮动(腾讯、小米均在使用)
直接添加以下样式即可。

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}