首页 > web前端 > html教程 > overflow清除浮动的问题_html/css_WEB-ITnose

overflow清除浮动的问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-06-21 09:32:46
原创
1466 人浏览过

<div style="background:blue; overflow:hidden;">	<div style="width:100px; height:100px; background:red; float:left;"></div></div>
登录后复制


一直没想明白为什么使用overflow:hidden可以清除浮动呢?这是什么原理啊?

另外这种方法是不是在IE9里不行了?我刚才试了下,不行。但在火狐里还可以。


回复讨论(解决方案)

没发觉能清除

没发觉能清除
可是我从网上看的教学视频,他里面讲的清除float有两种办法:1、clear 2、overflow:hidden;
而且在他那确实清除成功了,但在我这(IE9)不行。






为什么必须得给父DIV赋高呢?
另外用over:hidden消除浮动是什么原理啊?

<div style="background:#06F; overflow:hidden;">    	<div style="height:50px; width:100px; float:left; background:#F00;"></div>        <div style="height:100px; width:100px; background:#F0F;"></div>    </div>
登录后复制

你这样写的时候你测试一下,并没有清除浮动啊?

HTML code



<div style="background:blue;">    <div style="width:100px; height:100px; background:red; float:left;"></div></div>
登录后复制



加了over:hidden是这样的效果:
<div style="background:blue; overflow:hidden;">    <div style="width:100px; height:100px; background:red; float:left;"></div></div>
登录后复制



我所说的清除浮动,不是对后面元素的影响,是消除了对父元素的影响。
我的问题是,为什么over:hidden会实现这样的效果?

谢谢!

只知道对该div有溢出隐藏功能 至于浮动清除浮动 没发觉

算了我再开个帖子吧

说一下个人理解:
div不指定width和height时,默认width为0,height为100%;
不加overflow:hidden时,子div受float影响脱离父div的束缚,父div默认没有高度,自然就是第一个图的效果;
加上overflow:hidden时,所谓消除了浮动,那么子div自然就要使父div的高度为100px、宽度默认100%
实际上,overflow:hidden影响的只是垂直空间上的浮动,并不影响水平面上的浮动,将float设置为right可以看得更加明白。(仅仅是个人理解,不知道正确不。。。。。。)

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板