详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）

研究参

已于 2022-06-04 19:12:45 修改

阅读量3.7k

点赞数 5

文章标签： css css3 html 经验分享

于 2022-06-04 19:11:15 首次发布

本文链接：https://blog.csdn.net/New_user_/article/details/125124302

版权

⼀. overflow:hidden 溢出隐藏

给⼀个元素设置overflow: hidden，如果该元素中的内容超出了给定的宽度或⾼度，那么超出的部分将会被隐藏，不占位。

<style type="text/css">
	div {
		width: 150px;
		height: 60px;
		background: skyblue;
		overflow: hidden;  /*溢出隐藏*/
	}
</style>

<div>
	今天天⽓很好！<br />
	今天天⽓很好！<br />
	今天天⽓很好！<br />
	今天天⽓很好！<br />
</div>

效果如下：
在这里插入图片描述

⼆. overflow:hidden 清除浮动（页面塌陷）

⼀般⽽⾔，⽗级元素不设置⾼度时，⾼度随内容增加⾃适应⾼度。当⽗级元素内部的⼦元素全部都设置浮动float之后，⼦元素会脱离标准流，不占位，⽗级元素检测不到⼦元素的⾼度，⽗级元素⾼度为0。那么问题来了，如下：

<style type="text/css">
	.box{
		background:skyblue;
	}
	.kid{
		width: 100px;
		height: 100px;
		float:left;
	}
	.kid1{
		background: yellow;
	}
	.kid2{
		background: orange;
	}
	.wrap{
		width: 300px;
		height: 150px;
		background: blue;
		color: white;
	}
</style>

<body>
	<div class="box">
		<div class="kid kid1">⼦元素1</div>
		<div class="kid kid2">⼦元素2</div>
	</div>
	<div class="wrap">其他部分</div>
</body>

在这里插入图片描述
如上，由于⽗级元素没有⾼度，下⾯的元素会顶上去，造成页⾯的塌陷。因此，需要给⽗级加个overflow:hidden属性，这样⽗级的⾼度就随⼦级容器及⼦级内容的⾼度⽽⾃适应。如下：

由于在IE⽐较低版本的浏览器中使⽤overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;
所以为了让兼容性更好的话，如果需要使⽤overflow:hidden来清除浮动，那么最好加上zoom:1;

<style type="text/css">
	.box{
		background:skyblue;
		overflow: hidden;  /*清除浮动*/
		zoom:1;
	}
	.kid{
		width: 100px;
		height: 100px;
		float:left;
	}
	.kid1{
		background: yellow;
	}
	.kid2{
		background: orange;
	}
	.wrap{
		width: 300px;
		height: 150px;
		background: blue;
		color: white;
	}
</style>

<body>
	<div class="box">
		<div class="kid kid1">⼦元素1</div>
		<div class="kid kid2">⼦元素2</div>
	</div>
	<div class="wrap">其他部分</div>
</body>

在这里插入图片描述

三. overflow:hidden 解决外边距塌陷

⽗级元素内部有⼦元素，如果给⼦元素添加margin-top样式，那么⽗级元素也会跟着下来，造成外边距塌陷，如下：

<style type="text/css">
	.box{
		background:skyblue;
	}
	.kid{
		width: 100px;
		height: 100px;
		background: yellow;
		margin-top: 20px;
	}
</style>

<body>
	<div class="box">
		<div class="kid">⼦元素1</div>
	</div>
</body>

在这里插入图片描述

因此，给⽗级元素添加overflow: hidden，就可以解决这个问题了。

<style type="text/css">
	.box{
		background:skyblue;
		overflow: hidden; /*解决外边距塌陷*/   
	}
	.kid{
		width: 100px;
		height: 100px;
		background: yellow;
		margin-top: 20px;
	}
</style>

<body>
	<div class="box">
		<div class="kid">⼦元素1</div>
	</div>
</body>

在这里插入图片描述

研究参

关注

5
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）

详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）
复制链接

扫一扫