繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 闭合浮动元素超级简单的方法
- CSS样式表
- 网页设计关于WEB标准的相关问题汇总
- 项目管理:交互-设计-制作三个角色的组合
- 学习CSS制作网页总结的一些经验
- 多个CSS样式表争夺特定选择符的控制权
- 网页设计制作CSS实现隔行换色两种方法
- CSS教程:DIV底部放置文字
- CSS教程:CSS命名参考
- CSS教程:控制网页文件大小通过精简CSS实现
- CSS教程:关于文字溢出问题的研究
- 符合web标准的嵌入Flash的方法
- 学习WEB标准必备的四项技能
- CSS对表格单元格强制换行和不换行
- CSS制作符合网站标准的细线表格
- 区分IE6,IE7和firefox的CSS hack
- CSS教程:学习CSS的继承性
- CSS教程:CSS兼容的技巧
- CSS教程:浮动元素对浏览器的支持
- 闭合浮动元素让CSS代码更规范
- 深入分析网页CSS隐藏文字和以图换字技术
- 看懂《CSS hack浏览器兼容一览表》
CSS样式表 中的 闭合浮动元素超级简单的方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 64 ::
收藏到网摘: n/a
无意中看到的一个非常不错的小技巧.是关于用CSS处理闭合浮动元素的方法,收藏了.
关于闭合浮动元素（clearing float）的方法现在已经很多了，你还不了解的话去old9的blog看看，有一篇闭合浮动元素。
这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。原文在：http://annevankesteren.nl/2005/03/clearing-floats
原理是这样的，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释
引用内容：
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
现在只要将给外围元素添加一个overflow:auto;就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ie的问题了，再加上_height:1%; ，这个问题就完全解决了。
下面是我做的三个例子作为比较
1.没有闭合浮动元素
2.非IE下闭合浮动元素
3.完全闭合元素
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
