深入理解css系列：清除浮动

　　如果出现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样式里用来做通用的清楚浮动。