<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 解决浮动问题的四个方法</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<style type="text/css">
.box{ width:400px; border:1px solid #ccc; padding:20px; margin:40px auto 0 auto;}
.left{ float:left; width:100px; height:80px; background-color:#f60;}
.right{ float:right; width:290px; height:80px; background-color:#06f;}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<!-- clear:both 在 IE6 会出现多余的高度-->
<div style=" clear:both;"></div>
</div>
<div class="box">
<div class="right"></div>
<div class="left" style=" float:none;"></div>
</div>
<div class="box" style="overflow:hidden; *zoom:1;">
<div class="left"></div>
<div class="right"></div>
</div>
<style type="text/css">
.clearfix{ zoom:1;}
.clearfix:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
</style>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果图：
PS：建议使用第四种方法。