如果出现div嵌套，内层元素浮动，而外层包裹的父元素div未设置高度的时候，那么会出现外层不能被撑开的情况。
HTML标签代码：
<div class="wrap">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
css样式代码：
.wrap {
width: 100%;
background: red;
}
.inner {
width: 50px;
height: 50px;
background: yellow;
float: left;
}
效果图：
之所以会这样，是因为当一个内层元素是浮动的时候，如果没有关闭浮动，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开。
兼容性比较好而且比较优雅的清除浮动的方法如下。
在父元素标签上加一个清楚浮动的样式，
.clear {
zoom: 1;
}
.clear:after {
display: block;
clear: both;
visibility: hidden;
content: '';
}
通过给父元素加一个伪元素after，既不影响页面结构，而且较为容易理解，通用性很强，可以写到common样式里用来做通用的清楚浮动。