RSS
热门关键字:  命名  body  hack  !mi  !im
当前位置 :| 主页>div+css>基础教程>

闭合浮动元素(clearing float)的简单方法

来源:[标签:出处] 作者:[标签:作者] 时间:2008-02-19 点击:

关于闭合浮动元素(clearing float)的方法现在已经很多了,个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看上去不够简洁。

现在看到有个方法超级简单。介绍一下这个方法。原文在:http://annevankesteren.nl/2005/03/clearing-floats

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

下面的例子作为比较
1、没有闭合浮动元素;2、非IE下闭合浮动元素;3、完全闭合元素。相关代码如下:

XHTML代码:

%26lt;div id="wrap"%26gt;
%26lt;div class="column_left"%26gt;
%26lt;h1%26gt;Float left%26lt;/h1%26gt;
%26lt;/div%26gt;
%26lt;div class="column_right"%26gt;
%26lt;h1%26gt;Float right%26lt;/h1%26gt;
%26lt;/div%26gt;
%26lt;/div%26gt;

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;}

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
栏目列表