浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 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
网友评论