论坛快速导航: 2009年素材区 矢量素材 图片素材 网页模板 原创作品 佳作欣赏 网页设计专区 摄影之家 PhotoShop CorelDraw Illustrator | 在线繁体字转换翻译工具 WAP RSS
返回简洁设计网首页
最新教程 推荐教程 热门教程
当前位置: 简洁设计网 > 设计教程 > 网站制作 > htm_css > 正文
web标准化:闭合浮动元素超级简单的方法

     外围元素之所以不能很好的延伸,问题出在了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;}
点击进入论坛和大家一起交流设计,分享设计素材,结交设计朋友
设为首页 | 加入收藏 | 关于我们 | 联系我们 | 合作伙伴 | 版权信息 | 广告联系 | 友情链接 | 网站地图
版权所有 简洁设计网 [www.jianjie8.com] 您电脑的分辨率是 像素
Copyright 2008-2015 Www.Jianjie8.Com All Rights Reserved
陇ICP备05003399号