关于overflow:hidden的作用（解决父元素内子元素外边距塌陷或者消失的问题）

最新推荐文章于 2023-11-02 16:25:02 发布

曦和百里

最新推荐文章于 2023-11-02 16:25:02 发布

阅读量3.2w

点赞数 1

分类专栏： html5 css3 html 文章标签： html css html5 css3

本文链接：https://blog.csdn.net/weixin_44647865/article/details/115524760

版权

html5 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

关于overflow：hidden的作用

首先是超出隐藏
没有设置overflow：hidden属性之前

设置之后：

页面源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				background: #0088CC;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span>1111111111111111111111111111</span>
		</div>
	</body>
</html>

解决页面内子元素全部浮动之后父元素塌缩
界面内子元素暂时没有浮动

全部加入左浮动之后

在这里插入图片描述
加入overflow：hidden之后

页面源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				background-color: #0088CC;
				overflow: hidden;
			}
			.box_children:nth-child(1){
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
			.box_children:nth-child(2){
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box_children"></div>
			<div class="box_children"></div>
		</div>
	</body>
</html>

解决子元素外边框塌陷或者消失
添加前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				background: #0088CC;
			}
			.box_children{
				width: 200px;
				height: 200px;
				margin: 10px auto;//这里已经添加了外边框了，但是在下图并没有显示出来
				background: #DDDDDD;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box_children"></div>
		</div>
	</body>
</html>

在这里插入图片描述
添加之后

这里就不贴代码了，在.box里面添加overflow:hidden属性就好了

曦和百里

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于overflow:hidden的作用（解决父元素内子元素外边距塌陷或者消失的问题）

关于overflow：hidden的作用首先是超出隐藏没有设置overflow：hidden属性之前设置之后：页面源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 200px; background: #0088CC; overfl
复制链接

扫一扫