企业网站模板制作几种CSS清除浮动技巧
点击次数:更新时间:2010-12-14 11:12:39【打印】【关闭】
在使用BEES企业网站系统模板制作中经常会用到清除浮动，先推荐几种清除浮动的样式，部分方法目前不兼容浏览器 <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标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另 外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。 <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”> </div> 二、使用overflow属性 此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。 <style type=”text/css”>
<!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #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> 三、使用after伪对象清楚浮动 该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否 则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现 为空亦是可以的。 .
<style type=”text/css”>
<!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;} #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> 清楚浮动后如图所示： 
来源：52css.com |