web标准化：闭合浮动元素超级简单的方法--e天下网络

web标准化：闭合浮动元素超级简单的方法

[ 来路：21kn.com 时间：2007-7-7 21:02:46 点击： ]

外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见，见W3C的解释。现在只要将给外围元素添加一个overflow:auto;就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ie的问题了，再加上_height:1%; ，这个问题就完全解决了。

下面是我做的三个例子作为比较

1.没有闭合浮动元素
2.非IE下闭合浮动元素
3.完全闭合元素

代码如下：

XHTML<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>

CSS样式：

#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}

：：：：站长友情提示：多花一分钟学点什么都好：：：：

上一篇：网页制作总结：用CSS使DIV层水平居中下一篇：DIV+CSS布局网页页面实现多风格选择的方法

：：热点信息：：

= = 免责声明 = =

① 欢迎转载我网所刊信息，请注明“来源：E天下网络”。
② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。
※联系方式：Airtofly@163.com

：：推荐文章：：

Dreamweaver8创建自定义代码片

：：图像设计：：

动态图片搜索家——GIF RUNN

软件搜索利器——FileFerret

实例说明构图要讲规律

Character Builder让你尽展靓