浅谈CSS中overflow清除浮动的用法
一起CSS 发布时间：2015-09-28 11:19:29 作者：佚名 
我要评论
我要评论这篇文章主要介绍了CSS中overflow清除浮动的用法,让对IE6的支持再进行最后一点续命...需要的朋友可以参考下
overflow清除浮动以下面的XHTML代码为例：
XML/HTML Code复制内容到剪贴板
- <div id="container">
- <div id="left"></div>
- <div id="right"></div>
- </div>
我以前用的方法是（CSS代码）：
CSS Code复制内容到剪贴板
- #container{
- width:1000px;
- overflow:hidden;
- background:#999999;
- }
- #left{
- width:70%;
- height:500px;
- float:left;
- background:#ff0000;
- }
- #right{
- width:28%;
- height:500px;
- float:rightright:
- background:#0000ff;
- }
这种方法有效的清除了浮动，但 IE6 里没有效果，所以为了兼容 IE6 ，需要为父元素设了一个宽度，并且是一个合适的宽度。
再一种方法是把 overflow:hidden 换成 overflow:auto ，但 IE6 仍然没有效果，为了兼容 IE6 ，还是要做“手脚”，可以为父元素加上 height:1% 或 zoom:1 ，有人说 height:1% 应该写成 _height:1% ，但我并没有发现不加_符号有什么影响。而 zoom:1 则不能通过W3C验证。
总结一下：清除浮动可以用 overflow:hidden 或 overflow:auto ，在比较标准的浏览器里没有问题，但 IE6 没有效果，为了兼容 IE6 ，可以为父元素：
1、设置一个合适的宽度，但“合适的宽度”有的时候不好掌握；
2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点；
3、加上 zoom:1 ，不能通过W3C验证。
为了兼容 IE6 的这三种方法根据自己的实际情况和个人喜好选择吧。
相关文章
这篇文章主要介绍了CSS3 清除浮动的方法示例的相关资料,通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法,感兴趣的小伙伴们可以参考2018-06-01
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结，感兴趣的朋友跟随脚本之家小编一起2018-03-13
这篇文章主要介绍了清除css浮动的三种方法小结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-19- 这篇文章主要介绍了详解css清除浮动float的七种常用方法总结和兼容性处理,非常具有实用价值，需要的朋友可以参考下2017-09-11
- 本文主要介绍了CSS解决浮动，清除浮动的几种方法：1、设置父元素高度；2、overflow；3、增加子元素（块级），并且设置其clear属性值为both来解决（隔墙法、内墙法）；4、使2017-03-22
- 这篇文章主要为大家详细介绍了CSS清除浮动的常用方法优缺点，分析很全面，感兴趣的小伙伴们可以参考一下2016-04-25
- 下面小编就为大家带来一篇html+css 清除浮动的相关技巧心得。小编觉得挺不错的，现在分享给大家，给大家一个参考2016-03-17
- 这篇文章主要介绍了CSS中使用clearfix清除浮动的方法,作者列出了几个clearfix的不同的使用方法进行对比,需要的朋友可以参考下2015-07-09
- 这篇文章主要介绍了css 盒模型 文档流 几种清除浮动的方法实例详解,需要的朋友可以参考下2018-09-10
最新评论