这次把之前的坑填上主要探究下浮动的清除

为什么要清除浮动

浮动是一个CSS样式中的常用属性，float属性有三个属性值，分别为 none left和right。顾名思义，none即设置对象不浮动 left设置元素向左浮动，若多个元素同时设置了该属性则呈现一个从左到右的页面布局 right设置元素向右浮动，若多个元素同时设置了该属性则呈现一个从右到左的页面布局

比如下面这个例子：
HTML：

<div class="float_left">
    <div>向左浮动元素1</div>
    <div>向左浮动元素2</div>
    <div>向左浮动元素3</div>
</div>
<div class="float_right">
    <div>向右浮动元素1</div>
    <div>向右浮动元素2</div>
    <div>向右浮动元素3</div>
</div>

CSS样式：

<style type="text/css">
    .float_left,.float_right{
        width: 100%;
        height: 150px;
        border:1px dashed #000;
        margin-bottom: 10px;
    }
    .float_left div,.float_right div{
        width: 150px;
        height: 90px;
        border: 1px solid #999;
        margin: 10px;
    }
    .float_left div{
        float: left;
        background-color: #cc3299;
    }
    .float_right div{
        float: right;
        background-color: #007FFF;
    }
</style>

效果如下:

当我们设置某个元素为浮动时，该元素脱离普通流，导致包含该元素的父元素高度塌陷。比如下面这个例子：

<style type="text/css">
    #test div{
        width: 200px;
        height: 100px;
    }
    .float_left{
        float: left;
        background-color: #cc3299;
    }
    .float_right{
        float: right;
        background-color: #007FFF;
    }
    .third{
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #FFF;
    }
</style>
<div id="test">
    <div class="third">我是第三者</div>
    <div class="float_left">left</div>
    <div class="float_right">right</div>
</div>

id为test的div高度只有100px，高度塌陷了100px，这并不是我们想要的。为了减少浮动元素带来的负面影响，还原父元素应有的高度，这时候就需要闭合浮动

清除浮动的方式

使用br标签中的clear清除浮动

文本换行时会用到br标签，该标签的clear属性有三个属性值：left,right,all
修改代码如下：

<div id="test">
    <div class="third">我是第三者</div>
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <br clear="all" />
</div>

这种方法虽然代码量较少但是有违结构与表现的分离不推荐使用

在IE6中还需要触发 hasLayout 在父元素中利用 zoom：1修正

添加额外标签

通过在浮动元素末尾添加一个空的标签例如 <div style="clear: both"></div>，其他标签br等也可以

<div id="test">
    <div class="third">我是第三者</div>
    <div class="float_left">left</div>
    <div class="float_right">right</div>
    <div style="clear: both"></div>
</div>

<style type="text/css">
    .float_left{
        width: 200px;
        height: 100px;
        float: left;
        background-color: #cc3299;
    }
    .float_right{
        width: 200px;
        height: 100px;
        float: right;
        background-color: #007FFF;
    }
    .third{
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #FFF;
    }
</style>

添加无意义的空标签不符合我们结构与表现的分离的要求，不便于后期维护

设置父元素 `overflow:hidden`

#test{
        overflow: hidden;
        zoom: 1; /*修正ie6中的haslayout问题*/
    }

这种方式有个缺点：可能将我们溢出的东西隐藏。

设置父元素 `display:table`

#test{
        display: table;
    }

刷新下页面由于盒模型的属性发生了改变发现带来了新的问题还是不用的好

利用伪元素 `:after`

HTML稍作修改：

<div id="test" class="clearFix">
    <div class="third">我是第三者</div>
    <div class="float_left">left</div>
    <div class="float_right">right</div>
</div>

增加CSS样式

.clearFix:after{
    clear: both;
    display: block;
    visibility: hidden;
    content: "";
    height: 0;
    line-height: 0;
}
.clearFix{
     zoom: 1; /*修正ie6中的haslayout问题*/
}

以上几种方式，其实可以分为两种，

1、通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素

2、通过设置父元素 overflow 或者display：table 属性来闭合浮动