先来学一个和浮动没有什么关系的属性,overflow:hidden; 后面你将会看到这个属性和浮动的知识的联系。
overflow:溢出; hidden:隐藏。
这个css属性,用于将溢出到盒子border外的内容隐藏。
案例1:
对溢出要做处理:
添加:overflow:hidden
再看一个案例:
直观上看,这个属性对网页设计人员来说真是福音!比如一个盒子内部有一个比自己还宽的子盒子,这时候就会影响自己的表现。只需要给自己加上overflow:hidden即可。(当盒子掉下来了,不知道怎么哪儿溢出了,可以给父盒子加overflow:hidden;)
这个属性还可以用来做什么呢?
overflow:hidden可以用来清除浮动
首先overflow:hidden可以清除浮动对后面元素的影响。
接下来为:man添加样式
如何解决IE6中的兼容性问题呢?很简单,只需要再添加一个伴生属性:zoom:1,就可以了。
zoom是IE浏览器中的一个属性(不是W3C的属性),用于控制显示倍数。这个属性用于控制页面中的任何元素显示倍数的,这个属性非常干扰前端开发工程师的工作,微软在IE9中砍掉了这个属性!【兼容性问题】也就是说用overflow:hidden来清除浮动,对IE6有兼容性问题。
但是在这里我们借助zoom这个属性,设置1,盒子不会放大也不会缩小,但是会触发一个hasLayOut机制(有兴趣的同学可以百度)。
在有hasLayOut机制的情况下,IE浏览器可以用overflow:hidden,_zoom:1来清除浮动的影响。
小结:
Overflow:hidden 作用:
1、可以隐藏超出自己(border部分)的内容。
2、可以清除浮动,但要注意IE6的兼容性问题,要同时添加一个伴生属性_zoon:1。