您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

overflow:hidden 属性详细解释

时间：06-15来源：作者：点击数：

overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。我们下面来详细阐释一下。

测试代码：

<html>
	<head>
		<title></title>	
		<style>
			.aBox{
				background-color:blue;
				
			}
			.bBox{
				background-color:yellow;
				float:left;
				height:400px;
				width:400px;
			}
		</style>
	</head>
	<body>
		<div class="aBox">
			<div class="bBox"></div>
		</div>	
	</body>
</html>

效果图：

此处class为aBox的div高度没有被撑开，变为了0

原因在另外一篇文章有介绍，https://www.cdsy.xyz/computer/programme/html_div_css/230615/cd44239.html

此处只对解决办法overflow:hidden作出详细说明。

我们对父元素加上overflow:hidden属性

效果图：

我们发现class为aBox的div恢复了正常。

解释：

我们知道overflow:hidden这个属性的作用是隐藏溢出，若aBox的高度小于bBox，溢出的bBox高度会直接隐藏。是隐藏，并不是直接截除了。

另外，我们发现，在上面实验中，使用了overflow属性后，aBox的高度自动的被bBox 这个div的高度值给撑开了。

当aBox不使用overflow属性，bBox这个div又加上浮动这个属性的时候，在显示器的侧面，它已经脱离了aBox这个div，也就是说，此时的bBox的宽高是多少，对于已经脱离了的aBox来说，都是不起作用的。而当我们给aBox这个div加上overflow:hidden这个属性的时候，其中的bBox 等等带浮动属性的div对aBox的影响已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给aBox这个div设置高度的时候，bBox这个div的高度，就会撑开aBox这个div。

注意：这里清除的只是float属性对aBox的影响，但子div设定的浮动属性还是存在。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:子div有内容，父div高度为什么为0？（含解决方法）下一篇:子元素margin-top为何会对父元素造成影响?

Calibre – 一站式电	新手火腿必看！超详细的
图解 \| 原来这就是TCP	图解 \| 原来这就是网