清除浮动

清除浮动是用于什么场景？

父元素内部的子元素浮动后，会造成父元素的塌陷，父元素的高度为0，因而不会显示样式。

有时候，父级元素本来就是没有样式的，那么他塌陷不塌陷无所谓咯，不不不，图森破，如果父级元素后面还有元素，由于父级元素的塌陷，他们就会上来占据父级元素的位置，效果就是，子元素覆盖在了父级元素下面元素的上面。
所以，在需要应用父级元素的样式的时候，在不希望子元素覆盖父级下一个元素的时候，要清除浮动

让我们来清除调皮的浮动！

方法一：空元素追加法

html:

<div class="box-set">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="clean"></div>
</div>

css:

.box-set{
    background-color: #e8aaa9;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}
.clean{
    clear: both;
}

我的理解：

因为空元素的存在，父级元素识别内部元素整体时不再认为是浮动的，是有宽高的，因此并未塌陷。

不足之处：

给html加个空标签虽然简答有效，但它是语义化极差的，不推荐。

方法二：overflow技巧

html：

<div class="box-set">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

css:

.box-set{
    background-color: #e8aaa9;
    overflow: hidden;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}

overflow做了什么？

overflow 属性规定当内容溢出元素框时发生的事情。

我的理解：

overflow为父元素提供了一种检查内部元素的机制，在检查的过程中，识别出了内部的高度，父元素被撑起。

不足之处：

从效果图上，细心的你一定发现了overflow技巧和追加空标签的差别，是的，overflow把box的阴影给截断了，可能是父级元素并不将shadow的宽高值计入内部总宽高中，因此忽略。很多时候我们并不希望发生这样的事情。

方法三：clearfix技巧

html:

<div class="box-set">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

css:

.box-set :before,.box-set:after{
    content:"";
    display: table;
}
.box-set:after{
    clear: both;
}
.box-set{
    background-color: #e8aaa9;
     /*在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。*/
    *zoom: 1;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}

我的理解：

在css中使用before和after实现了在不影响DOM结构的情况下插入元素，弥补了方法一的不足，具体实现特性和方法一有异曲同工之处。

评价：

这是最优的清除浮动的方案。

参考资料：

HTML和CSS高级指南之二——定位详解