css清除浮动的几种方法
解决浮动问题之前先了解两个定义：
浮动：当元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）。
浮动带来的后果：浮动会使当前标签脱离文档流，产生上浮的效果，同时还会影响周边元素（前后标签）及父级元素的位置和width，height属性。
方法1：clear清除浮动（添加空div法），在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;} 例如：
<style type="text/css">
#d2{
width:200px;
height: 200px;
border: 1px dotted #ddd;
float: left;
}
#d3{
clear: both;
}
</style>
<div id="d1">
<div id="d2">
</div>
<div id="d3">
</div>
</div>
在上面例子中添加了一个d3，并且设置clear：both。
方法2：给父元素设置高度，这样父元素就不会因为自适应而没有高度了。
方法3：父级元素定义overflow：hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
overflow: hidden;
}
#d2{
width:200px;
height: 200px;
border: 1px dotted #ddd;
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
</body>
</html>
方法4：br 清浮动，br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
}
#d2{
width:200px;
height: 200px;
border: 1px dotted #ddd;
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
<br clear="both"/>
</div>
</body>
</html>
方法5：让父级元素也浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1 {
float: left;
}
#d2 {
width: 200px;
height: 200px;
border: 1px dotted #ddd;
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
</body>
</html>
方法6：使用after伪类清除浮动，但是要注意的是需要配合zoom使用（考虑到IE6和IE7）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1 {}
#d1:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
#d1{
zoom:1;
}
#d2 {
width: 200px;
height: 200px;
border: 1px dotted #ddd;
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号