首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > 网站重构教程 > 正文
Google
web标准化:闭合浮动元素超级简单的方法
来源:天极网 2006年07月13日 11:52 网友评论:0条 点击:

关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素。

这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。原文在:http://annevankesteren.nl/2005/03/clearing-floats

原理是这样的,外围元素之所以不能很好的延伸,问题出在了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;}

上一篇:重构:CSDN网站未来内容Tag架构猜想   下一篇:为什么要建立网站标准 建立标准有何意义
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】