Css中overflow属性的认识

Posted 2023-02-23 IT-source

先来学一个和浮动没有什么关系的属性，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。