css清除浮动代码_电脑知识大全-计算机网络应用基础知识,电脑基础知识与技术学习网

css清除浮动代码

时间:2014-12-30 20:55 来源:diannaodiy.net 作者:电脑知识大全点击:次

作为网站设计制作的前端的工作者，在些代码的时候经常会提到“清除浮动”这个词，其实我们大家也都在使用各种方法来操作，很少了解清除浮动最初始的用法，真正的“清除浮动”是什么呢，float:none;这才是“清除浮动”的字面意思。当然，也有可能是“清除浮动”就是个简称，意思就是“清除浮动造成的影响”，只是叫了顺口，大家也都这么称呼了。

我们大家在使用xhtml+css布局经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,那么清除浮动就是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0; }
#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }
</style>

<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>

未清除浮动前如图所示：

未清除浮动图片

三种清除浮动方法如下：

1、使用空标签清除浮动。

我用了很久的一种方法，空标签可以是div标签，也可以是p/span/br等标签，理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

ps:<br clear=”all”/>也可以实现效果。

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0; }
#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }
.clr { clear:both; }
</style>

<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<div style="clear:both"/>
</div>

2、使用overflow属性。

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0; overflow:auto; zoom:1; }
#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }
</style>
</head> 
<body>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>

3、使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，网上讨论该方法的时候content属性的值设为”.”，但我发现为空也是可以的。

<style type="text/css">
body { font-size:24px; color:red; }
#layout { background:#FF0;  }
#layout:after{display:block;clear:both; content:""; visibility:hidden;height:0;}
#left { float:left; width:20%; height:200px; background:#CCC; }
#right { float:right; width:30%; height:80px; background:#CCC; }
</style>

<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>

清除浮动后如图所示：

清除浮动后的图片

上面介绍的三种方法各有利弊，我们大家在使用的时候应择优选择，小编推荐第二种方法更为可取。

推荐文章：
css清除浮动的方法

(责任编辑：电脑知识大全)