常用的清除浮动的方法有以下三种:
此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 36px bold;
color: #F00;
text-align: center;
}
#layout {
background: #FF9;
}
#left {
float: left;
20%;
height: 200px;
background: #DDD;
line-height: 200px;
}
#right {
float: right;
30%;
height: 80px;
background: #DDD;
line-height: 80px;
}
</style>
</head>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</html>
result:
三种清除浮动方法如下：
1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外 为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的 是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合 适。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 36px bold;
color: #F00;
text-align: center;
}
#layout {
background: #FF9;
}
#left {
float: left;
20%;
height: 200px;
background: #DDD;
line-height: 200px;
}
#right {
float: right;
30%;
height: 80px;
background: #DDD;
line-height: 80px;
}
.clr {
clear: both;
}
</style>
</head>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr"></p>
</div>
</html>
result:
2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用100%。
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 36px bold;
color: #F00;
text-align: center;
}
#layout {
background: #FF9;
overflow: auto;
zoom: 1; /* overflow:auto可以换成overflow:hidden，zoom:1可以换成100%*/
}
#left {
float: left;
20%;
height: 200px;
background: #DDD;
line-height: 200px;
}
#right {
float: right;
30%;
height: 80px;
background: #DDD;
line-height: 80px;
}
</style>
</head>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</html>
result:
3、使用after伪对象清除浮动。
该方法只适用于非IE浏览器 。具体写法可参照以下示例。
使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 36px bold;
color: #F00;
text-align: center;
}
#layout {
background: #FF9;
}
#layout:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
#left {
float: left;
20%;
height: 200px;
background: #DDD;
line-height: 200px;
}
#right {
float: right;
30%;
height: 80px;
background: #DDD;
line-height: 80px;
}
</style>
</head>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</html>
此三种方法各有利弊，使用时应择优选择，个人习惯于第一种，比较稳定可靠。