<!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:建议使用第四种方法。