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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-06-21 09:32:46
原創
1473 人瀏覽過

<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
最新問題
java - springboot新手學習
來自於 1970-01-01 08:00:00
0
0
0
spring - JavaWeb中 Service 層的事務問題
來自於 1970-01-01 08:00:00
0
0
0
java - C語言演算法題-韓信點兵 解法?
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板