C语言 c++ php mysql nginx linux lnmp lamp lanmp memcache redis 面试 笔记 ppt 设计模式 问题 远程连接

清除浮动的几种方式

 

<!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

posted on 2013-06-12 15:48  思齐_  阅读(382)  评论(0编辑  收藏  举报