清除元素浮动的方法

一、为什么要清除浮动
父元素没有设置高或者高设置为auto或者父元素的高度小于子元素高度时，子元素若浮动即脱离文本流（这时无论你怎么调子元素的高度，父元素的高度都不会有变化），父元素高度就会出现所谓的坍缩（即高度为0或者为你设置的高度），这可能会影响页面下面的布局，所以在设置了浮动后要清除浮动。
二、清除浮动的方法
1、用overflow：hidden 清除浮动：
在子元素设置浮动后，如果父元素没有设置高度或者高度为auto时，可在父元素的css里设置overflow：hidden，这时父元素高度会自动撑开。
但这个方法仅限于父元素没有高度或者高度为auto的时候。因为overflow：hidden还有一个意思是超出部分隐藏（即如果你设置了父元素的高度，且父元素的高度小于子元素高度，那么子元素超出父元素的部分会被隐藏）。

2.用clear清除浮动：
clear的用法官方解释为“元素盒子的边不能和前面的浮动元素相邻”。怎么理解呢？clear很善良，它只会让自己离开不会让他周围的元素离开。举个栗子：比如：clear：left，因为左边有浮动元素，它不会改变左边的浮动元素，所以只能自己离开左边的浮动元素，换到下一行，这样他的左边就不会有浮动元素了。
要想使父元素撑开，设置clear的元素就不能浮动。
清除方法是：
内部标签：在子元素同级添加空标签，然后在css设置clear：both，这样会是父元素的高度撑开。
外部标签：在父元素同级添加空标签，然后css设置clear：both，这样会将浮动盒子的影响清除，但是父元素不会撑开。
（不建议使用这种方法，因为这样会增加没有必要的空标签）
3.使用伪元素after来清除浮动
给父元素添加伪元素
如下：

为兼容IE6,IE7，因为ie6,ie7不能用after伪类。需要在父元素里加上下面代码zoom：1；
<style type="text/css">
.a{
            margin:0 auto;
            width:500px;
            border:1px solid red;
            zoom:1;
        }
        .a:after{
            content:"";//设置内容为空
            display:block;//将文本转为块级元素
            height:0;//高度为0
            line-height:0;//行高为0
            visibility: hidden;//将元素隐藏
            clear:both;//清除浮动
        }
        .b{
            float: left;
            width:100px;
            height:300px;
            background-color: green;
        }
        .c{
            float:left;
            width:100px;
            height:300px;
            background-color: yellow;

        }
        .d{
            float:left;
            width:100px;
            height:200px;
            background-color: navajowhite;

        }
</style>

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

尽量使用这种方法
4.双伪类清除浮动

.a:before,.a:after {

                  content: "";

                  display: block;

                  clear: both;

            }

            .a{

                  zoom: 1;

            }

此方法不严谨，不推荐使用