<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style> * { margin: 0; padding: 0; } .father { background-color: #EEE; margin:100px auto;border:1px solid red;} .child1, .child2 { border: 1px dashed #555; float: left; width: 400px; margin: 30px 10px; } /* 清除浮动的四种方法 */ /* 方法一 */ /*弊端： 此时父元素高度自适应，但是左右外边距auto失效，父元素靠左对齐*/ /*.father { float: left; }*/ /* 方法二 高度自适应的关键。auto的话ie6会产生滚动条 */ .father { float: none; overflow: auto; /*hidden也是可以的*/ _zoom: 1;/*修复ie6的滚动条的问题(不加也是没有问题的)*/ } /* 方法三 法，但ie6不兼容 有其他问题 */ .father:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; } /*方法四*/ /*空标签法 所有浏览器都适用 最后加入一个clearboth的空标签，但在某些浏览器会产生间隙*/ .clear{ clear:both;} /*方式五 在浮动元素后面增加<br/>标签, <br/>标签有自带的清除浮动属性功能*/
/*方式六*/
/* Clear Fix */
.cl{*zoom:1;}
.cl:after{content:"";display:table;clear:both}
</style> </head> <body> <div class="father"> <div class="child1"><p>浮动元素</p></div> <div class="child2"><p>浮动元素<br /><br /><br /><br /><br /><br /><br /></p></div> <div class="clear"></div> </div> </body> </html>
原文地址：
http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=9008