Css中overflow属性的认识

本文深入探讨了CSS中的overflow:hidden 属性,不仅解释了其基本功能,即隐藏溢出到盒子border外的内容,还揭示了它在解决浮动布局问题时的巧妙用途。特别关注了如何利用overflow:hidden 来清除浮动对后续元素的影响,并介绍了为解决IE6兼容性问题所需的额外步骤——添加伴生属性_zoom:1。通过实际案例,详细展示了这一属性在网页设计中的实用价值。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值