您现在的位置:主页 > 网站制作 > XHTML标准 >

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

来源:建站吧 责任编辑:Jzq8 发表时间:2011-12-09 点击:

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

  这一方面的原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决ID的问题了,再加上“_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;}

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    验证码:点击我更换图片

    今日头条

    更多>>

    推荐图文

    • 网页制作实例:图片真正居中的方法
    • 网站程序员如何应对web标准
    • 展示网站特色:大字体的网页设计风格
    • HTML代码示例:可以搞死任何版本的IE
    • WEB标准中细线表格的实现方法
    • 网页制作需掌握的6种能力
    • 用标准件的方式来组装网页DIV布局
    • 符合Web标准!CSS同比例缩小图片
    • 论述HTML5代码将带来的好与坏
    Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
    Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
    冀ICP备09002514号
    冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款