<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- /** * Created by JetBrains WebStorm. * User: Ganler * Date: 13-5-29 * Time: 下午10:31 * To change this template use File | Settings | File Templates. */ --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } </style> </head> <body> <div style="border:2px solid red;"> 没有clear的效果 <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">CSSBBS</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> </div> <div style="border:2px solid red;margin-top: 100px;"> clear:both <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">CSSBBS</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="clear:both;"></div> </div> <div style="border:2px solid red;margin-top:100px;" class="clearfix"> 父容器使用 clearfix <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">CSSBBS</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> <div style="clear:both;"></div> </div> </body> </html>