css元素塌陷

内部元素设置了浮动（float）导致外部父元素无法被撑开，从而就坍塌了。

<div class="d">
    <div class="a"></div>
    <div class="b"></div>
    <!-- <div class="c"></div> -->
</div>

.d { border: 1px solid red; }
.a,.b { width: 100px; height: 100px; float: left; }

解决方法：清除浮动

1 在父元素d内最后加一个空的div，并清除浮动 .c { clear: both; }

2 父元素设置 overflow: hidden；

3 给父元素添加伪类 :before/:after

.d:after {
    content: "";
    display: block; /*添加内容以块元素显示，占满整个空间*/
    clear: both;
}