css清除浮动几种做法
发布时间：01/15 来源： 浏览：
关键词：
我们介绍了三种浮动的清除方法，有朋友会问为什么要清除浮动，这应该是css div初学者吧，下面我们来看实例，有需要的同学看看。
最常用的一种
| 代码如下 | |
| <style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} –> </style> <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> </div> |
|
使用div来操作
使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。
ps:<br clear=”all”/>也可以实现效果，但不清楚使用哪个比较好。呵呵
| 代码如下 | |
| <style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clr{clear:both;} –> </style> <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> <p class=”clr”> </p> </div> |
|
清除浮动常见的做法是加一个额外的标签，然后给这个标签加上 clear:both 的设置，追求完美的人当然不乐意这种方式，于是，便有了本文将要介绍的：不增加额外元素实现清除浮动的方法,给需要清除浮动的元素增加一个 clearfix 的 class 即可
| 代码如下 | |
|
<style type="text/css">
content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
</style> |
|
