在html中通过使用css解决高度塌陷问题

Tea-pd

已于 2022-07-20 00:03:43 修改

阅读量383

点赞数 7

分类专栏： html 文章标签： html css 前端 css3 javascript

于 2022-07-19 11:14:46 首次发布

本文链接：https://blog.csdn.net/tea_tea_/article/details/125866361

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了在CSS中由于浮动元素导致的父元素高度塌陷问题，并提供了四种解决方案：设置固定高度、使用overflow:hidden、添加空块元素以及使用伪元素after。每种方法的优缺点和适用场景都有所探讨，对于前端开发者来说是理解并解决高度塌陷问题的良好参考。

摘要由CSDN通过智能技术生成

2.给父元素添加一个overflow: hidden;

3.在父元素里最后添加一个空的块元素

4.设置父元素：after

首先，先给大家看一下高度塌陷的效果

1. 我们先写两个盒子用来演示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				background-color: antiquewhite;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first"></div>
			<div class="two"></div>
		</div>
	</body>

</html>

2.接下来我们开始演示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first"></div>
			<div class="two"></div>
		</div>
	</body>

</html>

大家可以看见当我给两个div分别设置浮动时，最大的盒子消失不见了，但宽度还在，接下来我给最大div盒子加一个边框给大家看

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				border: 1px solid red;
				background-color: antiquewhite;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;

			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;

			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first"></div>
			<div class="two"></div>
		</div>
	</body>

</html>

结论：当一个盒子里所有的子元素都设置了浮动时，那么他们的父元素盒子就会出现高度塌陷的效果。且父元素没有设置固定的高度！！！！

解决方法：

1.给父元素添加一个固定的高度

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				border: 1px solid red;
				background-color: antiquewhite;
				height: 200px;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first"></div>
			<div class="two"></div>
		</div>
	</body>

</html>

由此可见，这样设置效果图就出来了，但这个方法有一个缺点就是父元素设置了一个固定的宽高，但这样在后续我们进行修改时就很不方便了，并且也会影响布局，在写项目时不推荐使用

2.给父元素添加一个overflow: hidden;

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				border: 1px solid red;
				background-color: antiquewhite;
				overflow: hidden;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first"></div>
			<div class="two"></div>
		</div>
	</body>

</html>

由此可见，设置overflow: hidden; 也可以解决，但这个方法也有一个缺点下方给大家演示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				border: 1px solid red;
				background-color: antiquewhite;
				overflow: hidden;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
				float: right;
			}

			.first div {
				width: 200px;
				height: 20px;
				background-color: cadetblue;
				margin-top: 80px;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first">
				<div>aaa</div>
			</div>
			<div class="two"></div>
		</div>
	</body>

</html>

这里我给第一个.first的div里在加一个div，并且设marfin-top为80px

接下来我们把80改成100

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				border: 1px solid red;
				background-color: antiquewhite;
				overflow: hidden;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
				float: right;
			}

			.first div {
				width: 200px;
				height: 20px;
				background-color: cadetblue;
				margin-top: 100px;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first">
				<div>aaa</div>
			</div>
			<div class="two"></div>
		</div>
	</body>

</html>

这样大家可以看见，小盒子消失了，这个是因为最大盒子设置了overflow：hodder，所有就会导致出现这种情况，这种情况在我们写下拉框时会遇到

3.在父元素里最后添加一个空的块元素

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				border: 1px solid red;
				background-color: antiquewhite;

			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
				float: right;
			}

			.kong {
				clear: both;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first">

			</div>
			<div class="two"></div>
			<div class="kong"></div>
		</div>
	</body>

</html>

这里同样可以实现效果，但记着要给最后一个盒子设置一个清除浮动，但这个方法的缺点就是会使代码多余，不够美观

4.设置父元素：after

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#bodys {
				width: 300px;
				border: 1px solid red;
				background-color: antiquewhite;

			}

			#bodys:after {
				content: "";
				clear: both;
				display: block;
			}

			.first {
				width: 100px;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			.two {
				width: 100px;
				height: 100px;
				background-color: brown;
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="bodys">
			<div class="first">

			</div>
			<div class="two"></div>

		</div>
	</body>

</html>

大家可以看见我给父元素添加了一个结束伪类

#bodys:after {
               content: "";
               clear: both;
               display: block;
           }

这样就也可以解决高度塌陷的问题，这个方法是推荐使用的

以上就是本人目前掌握的解决高度塌陷的方法，如果有更好的方法或者错误之处欢迎告知