overflow清除浮动的问题_html/css_WEB-ITnose-tutoriel HTML-php.cn

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2016-06-21 09:32:46

original

1463 Les gens l'ont consulté

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

Copier après la connexion

一直没想明白为什么使用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>

Copier après la connexion

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

HTML code

<div style="background:blue;">    <div style="width:100px; height:100px; background:red; float:left;"></div></div>

Copier après la connexion

加了over:hidden是这样的效果：

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

Copier après la connexion

我所说的清除浮动，不是对后面元素的影响，是消除了对父元素的影响。
我的问题是，为什么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可以看得更加明白。（仅仅是个人理解，不知道正确不。。。。。。）