CSS清除浮动八种方法

浮动引起的问题：

1.父元素高度坍塌。

2.后面非浮动元素跟随其后。破坏了页面布局。

html:

<div class="test">前面的元素</div>
<div class="parent">
    <div class="child1">左浮动</div>
    <div class="child2">左浮动</div>
</div>
<div class="test">后面的元素</div>

因此我们需要清除浮动，清除浮动的方式有以下几种：

1.给父级后面的元素添加css属性clear:both;这样可以解决问题2，但是父级元素是仍旧没有高度的。而以下几个方法都可以解决这个问题。

2.在父级元素里的末尾添加一个空的div，设置clear:both;

优点：简单。

缺陷：页面浮动布局多，就要增加很多空div。

3.设置父级伪类:after和zoom;（推荐方法）

IE8以上和非IE浏览器才支持:after，原理和方法2类似，zoom(IE专有属性)可解决ie6,ie7浮动问题。

.parent{
    border: 1px solid red;
}
.child1, .child2{
    float: left;
    border: 1px solid blue;
}
.test{
    background: pink;
}
/* 清除浮动 */
.parent:after{
    content: ' ';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.parent{
    zoom: 1; 
}

4.设置父级元素高度。只建议高度固定的布局时使用。如下设置了高度30px;

5.设置父级元素overflow:hidden或auto。

.parent{
    border: 1px solid red;
    /* 清除浮动 */
    overflow: hidden;
    /* zoom: 1; */
    width: 100%;
}

注意：1.必须定义width或zoom:1，同时不能定义height，使用overflow:hidden或auto时，浏览器会自动检查浮动区域的高度。

　　　2.不能和position配合使用，因为超出的会被隐藏。如下：

.parent{
    border: 1px solid red;
    overflow: hidden;
    zoom: 1;
    /* 使用position */
    position: relative;
}
.child1, .child2{
    float: left;
    border: 1px solid blue;
    /* 使用position */
    position: absolute;            
}

子元素就被隐藏了：

6.父元素也设置浮动，其后元素设置clear:both;

.parent{
    border: 1px solid red;
    float: left;
}
.child1, .child2{
    float: left;
    border: 1px solid blue;
}
.test{
    background: pink;
    clear: both;
}

7.将父级元素设置为表格。

.parent{
    border: 1px solid red;
    display: table;
    width: 100%;
}

8.在结尾处加<br/>标签。

<div class="parent">
    <div class="child1">左浮动</div>
    <div class="child2">左浮动</div>
    <br class="clearFloat">
</div>

.parent{
    border: 1px solid red;
    zoom: 1;
}
.clearFloat{
    clear: both;
}