清除浮动方法总结

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性，在网页设计中清除浮动是一种很常见的操作，以下整理了几种清除浮动的方法

• 给父元素设定高度
• 给下一个添加clear属性
• 增加一道墙(空标签)
• 使用after伪元素
• 使用overflow:hidden属性

具体方法

HTML 默认统一代码：

<div id="div1">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div id="div2"></div>

1.给父元素设定高度

#div1{
    width: 400px;
    height: 120px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

给父元素设定高度

分析：这种方法只适合高度固定的布局，需要给出精确的高度，不建议使用

2.给下一个添加clear属性

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
    clear: both;
}

给下一个添加clear属性

分析：父元素的高度没有被撑起来，设置的样式可能会失效，且margin属性不再起作用

3.增加一道墙

我们可以在两个父类之间增加一道墙使它们分开

<div id="div1">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="cl"></div>
<div id="div2"></div>

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

.cl{
    height: 0;
    line-height: 0;
    clear: both;
}

添加一道墙

分析： 该方法弥补了margin属性的问题，但父元素的高度仍然没有被撑起

在第一个父元素内部增加一道墙

<div id="div1">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="cl"></div>
</div>

<div id="div2"></div>

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

.cl{
    height: 0;
    line-height: 0;
    clear: both;
}

添加一道墙

分析： 该方法解决了以上的问题，但使用额外的标签会让人感觉很不爽，这是以前主要使用的一种解决方法

4.使用after伪元素

#div1{
    width: 400px;
    border: 1px solid black;
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

#div1:after{
    content: '';
    display: block;
    clear: both;
}
/*兼容IE*/
#div1{
    zoom: 1;  
}

使用after伪元素

分析： 推荐使用，可以定义公共类来减少css代码

5.利用overflow:hidden属性

#div1{
    width: 400px;
    /*height: 300px;*/
    border: 1px solid black;
    overflow: hidden;
    zoom: 1; /* 兼容IE */
}

#div1 .child{
    width: 100px;
    height: 120px;
    background-color: orange;
    margin-right: 20px;
    float: left;
}

#div2{
    width:400px;
    height: 60px;
    background-color: green;
}

overflow属性

分析： overflow本意是将溢出盒子的内容隐藏掉，但是仍可以用来做浮动的清除。在不使用position属性的时候可以使用该方法。

另外还有使父元素浮动，父元素绝对定位，父元素定义display:table等方法，但都有相应的问题，了解一下即可。

文章同步： levinhax's Github Blog