清除浮动 - 版本历史

iifksp：/* 方法的优缺点 */

2011-10-27T07:45:19Z

‎方法的优缺点

iifksp：/* 效果展示 */

2011-10-27T07:44:48Z

‎效果展示

iifksp：/* 使用after伪类和zoom:1;方式清除浮动 */

2011-10-27T07:44:26Z

‎使用after伪类和zoom:1;方式清除浮动

iifksp：/* 代码解释 */

2011-10-27T07:43:42Z

‎代码解释

yoom：创建新页面为 '== 演示示例源代码 == 下面是示例的代码，以稍后展示如何用各种办法清除浮动。 '''注意：这里只改动内联样式表中的内容，结构是固…'

2010-01-19T15:20:26Z

创建新页面为 '== 演示示例源代码 == 下面是示例的代码，以稍后展示如何用各种办法清除浮动。 '''注意：这里只改动内联样式表中的内容，结构是固…'

新页面

== 演示示例源代码 ==

下面是示例的代码，以稍后展示如何用各种办法清除浮动。
'''注意：这里只改动内联样式表中的内容，结构是固定不变的，并禁止修改。'''

<pre id="source_code">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动的办法</title>
<style type="text/css">
body{width:260px;margin:20px auto;}
#container{border:solid 1px #000;}
#sidebar,#content{width:95px;height:60px;}
#sidebar{float:left;background:#C8C2F8;}
#content{float:right;background:#BEFAB8;}
#footer{border:solid 1px #f0f;background:#FED8D8;}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">#sidebar</div>
<div id="content">#content</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
</pre>

这里使用了3款浏览器来进行测试，分别是 Internet Explorer 6、Safari 4、Opera 10。

[[File:2.gif|frame|none|未清除浮动]]

== 使用overflow:auto;zoom:1;方式清除浮动 ==

=== 步骤 ===
<pre>

将#container{border:solid 1px red;}
替换为：#container{border:solid 1px red;overflow:auto;zoom:1;}

</pre>

===代码解释===
overflow:auto;针对Safari 4 和Opera 10来清除浮动，而zoom:1;用于触发IE的[[hasLayout]]。

=== 效果展示 ===

[[File:overflowzoom1.gif|frame|none|清除浮动后之截图]]

== 使用after伪类和zoom:1;方式清除浮动 ==

=== 步骤 ===
<pre>
在源代码的基础上：
将#container{border:solid 1px red;}
替换为：#container{border:solid 1px red;zoom:1;}

并增加一条CSS规则：
#container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
</pre>

===代码解释===
after伪类针对[[标准浏览器]]清除浮动，而zoom:1;用于触发IE的[[hasLayout]]。

=== 效果展示 ===

[[File:afterzoom1.gif|frame|none|使用after伪类和zoom:1;方式清除浮动，可以看出跟采用overflow:auto;zoom:1;方式效果一致]]

== 方法的优缺点 ==

对于使用overflow:auto;清除浮动，是不推荐的一种方式<ref>http://www.aoao.org.cn/blog/2007/05/firefox-overflow-auto/ Firefox使用overflow:auto会产生focus</ref>，特别是在子元素使用了绝对定位之时<ref>http://www.planabc.net/2009/01/14/how_to_quickly_locate_the_complicated_css_bug/#comment-2520 第11楼的回复</ref>。
zoom:1;可以很好的解决IE6、7版本之清除浮动问题，而after伪类对[[标准浏览器]]亦提供了一套方案。

由于zoom:1;是IE的私有属性，目前不被w3c标准认可，因此暂不能通过w3c的css效验服务。

'''因此，推荐采用after和zoom:1;相结合使用 <ref>http://www.planabc.net/2008/05/04/yui_grids_css/ 清除布局的浮动</ref> 。'''

==参考文献==
<references/>

[[Category:CSS]]

@@ 第74行： / 第74行： @@
 对于使用overflow:auto;清除浮动，是不推荐的一种方式<ref>http://www.aoao.org.cn/blog/2007/05/firefox-overflow-auto/ Firefox使用overflow:auto会产生focus</ref>，特别是在子元素使用了绝对定位之时<ref>http://www.planabc.net/2009/01/14/how_to_quickly_locate_the_complicated_css_bug/#comment-2520 第11楼的回复</ref>。
-zoom:1;可以很好的解决IE6、7版本之清除浮动问题，而after伪类对[[标准浏览器]]亦提供了一套方案。
+zoom:1;可以很好的解决IE6、7版本之清除浮动问题，而after伪元素对[[标准浏览器]]亦提供了一套方案。
 由于zoom:1;是IE的私有属性，目前不被w3c标准认可，因此暂不能通过w3c的css效验服务。

@@ 第69行： / 第69行： @@
 === 效果展示 ===
-[[File:afterzoom1.gif|frame|none|使用after伪类和zoom:1;方式清除浮动，可以看出跟采用overflow:auto;zoom:1;方式效果一致]]
+[[File:afterzoom1.gif|frame|none|使用after伪元素和zoom:1;方式清除浮动，可以看出跟采用overflow:auto;zoom:1;方式效果一致]]
 == 方法的优缺点 ==

@@ 第52行： / 第52行： @@
-== 使用after伪类和zoom:1;方式清除浮动 ==
+== 使用after伪元素和zoom:1;方式清除浮动 ==
 === 步骤 ===
@@ 第70行： / 第70行： @@
 [[File:afterzoom1.gif|frame|none|使用after伪类和zoom:1;方式清除浮动，可以看出跟采用overflow:auto;zoom:1;方式效果一致]]
 == 方法的优缺点 ==

@@ 第65行： / 第65行： @@
 ===代码解释===
-after伪类针对[[标准浏览器]]清除浮动，而zoom:1;用于触发IE的[[hasLayout]]。
+after伪元素针对[[标准浏览器]]清除浮动，而zoom:1;用于触发IE的[[hasLayout]]。
 === 效果展示 ===