河南新华电脑学院
欢迎 游客 , 注册 | 登录 | 会员 | 界面 | 简洁版本 | 在线 | 帮助
河南新华电脑学院

河南新华电脑学院社团在线奇点WEB工作室闭合浮动元素（clearing float）的简单方法


发表新主题 回复该主题
本主题被查看294次, 共1个帖子, 1页, 当前为第1页     选择页数: 1      跳转到第 页   上一主题   下一主题
标题: 闭合浮动元素（clearing float）的简单方法
注册会员
UID: 1042
来自:
精华: 0
积分: 73
帖子: 73
注册: 2008-2-26 7:58:48
状态: 离线
威望: 0
金钱: 13.85 元
只看楼主 2008-03-09 13:54
闭合浮动元素（clearing float）的简单方法

   

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

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

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

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

XHTML代码：

  Example Source Code [www.52css.com]
<div id="wrap">
<div class="column_left">
  <h1>Float left</h1>
</div>
<div class="column_right">
  <h1>Float right</h1>
</div>
</div>


CSS样式：
  Example Source Code [www.52css.com]
#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;}
#1  
发表新主题 回复该主题
本主题被查看294次, 共1个帖子, 1页, 当前为第1页     选择页数: 1      跳转到第 页







现在的时间是 2008-11-20 23:34:13

版权所有 河南新华电脑学院  
          1.0.2642 (RC2)   Copyright © 2001-2008 Comsenz Inc.
Processed in 0.28 seconds