<!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>DIV的浮动</title> <style type="text/css"> #container1{background-color:#F00; padding:10px; text-align:center; margin-left:auto; margin-right:auto;} #container2{background-color:#309; text-align:center; margin-left:auto; margin-right:auto; padding:10px; overflow:auto; zoom:1;} #container3:after{ content:'.'; clear:both; display:block; visibility:hidden; height:0px;} #container3{background-color:#F00; padding:10px; text-align:center; margin-left:auto; margin-right:auto;} #lay1{width:30%; height:50px; background-color:#063; float:left;} #lay2{width:60%; height:50px; background-color:#066; float:right;} </style> </head> <body> 使用伪元素消除浮动 <div id="container3"> <div id="lay1">陈金明</div> <div id="lay2"></div> </div> 使用overflow属性消除浮动 <div id="container2"> <div id="lay1">陈金明</div> <div id="lay2"></div> </div> 使用空标签，外层div可以自适应内层元素的大小 <div id="container1"> <div id="lay1">陈金明</div> <div id="lay2"></div> <div style="clear:both"></div> </div> 不使用空标签，则外层div无法适应内层元素的大小 <div id="container1"> <div id="lay1">陈金明</div> <div id="lay2"></div> </div> </body> </html>