解决高度塌陷：万能清除法

最新推荐文章于 2023-03-06 16:46:37 发布

久伴丶帅

最新推荐文章于 2023-03-06 16:46:37 发布

阅读量1.5k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45981912/article/details/104578321

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

逆战班

高度塌陷：当父元素不设置高度时，其他高度会随着里面的子元素的高度的变化而变化，即父元素的高度由子元素的高度撑开，达到高度自适应的目的。而当父元素的**第一级子元素都设置了浮

动**时，父元素不在计算其高度，因此就发生了高度塌陷。下面我们就写一个例子来试一下：

html的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>		
	</body>
</html>

css代码：

*{margin: 0;padding: 0;}
html,body{height: 100%;}
.box{
	width: 500px;
	height: auto;
	margin: 0 auto;
	border: 1px solid #0f0;
	background: #0f0;
	margin-top: 50px;
}
.box .box1{
	width: 100px;
	height: 100px;
	background: #f00;
}
.box .box2{
	width: 100px;
	height: 100px;
	background: #00f;
}

这时在浏览器的效果为：
在这里插入图片描述
绿色背景的为父元素div，父元素的高度没有设置，完全是由子元素的高度撑开的。
红色和蓝色为其子元素div，这时我们给box1和box2都加上浮动属性，让他们在同一行显示的时候，会发生什么事情呢？

.box1,.box2{
	float: left;
}

在这里插入图片描述
这个时候我们发现box1和box2浮动之后在同一行显示了，但他们的父元素box的高度却因为消失了，绿色背景就没了，这就是所谓的高度塌陷。

这时如果我们想让父元素的高度和背景正常显示的时候，有好几种方法，都能解决高度塌陷的问题，在这里就只做万能清除法的演示了。

谁发生了高度塌陷的问题，就给他设置万能清除法
代码如下：

.box:after{
	content: "";
	display: block;
	clear: both;

 	height：0；
	overflow：hidden；
	visibilty：hidden；
}

在这里插入图片描述
这时浏览器中就能正常的显示父元素的高度了。

万能清除法中，只需要写前三个属性就能达到效果了，后三个属性主要是为了兼容一些浏览器才会添加的。

这也是我刚学到的，如果有说错的地方欢迎纠正，感谢观看~~

久伴丶帅

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决高度塌陷：万能清除法

逆战班高度塌陷：当父元素不设置高度时，其他高度会随着里面的子元素的高度的变化而变化，即父元素的高度由子元素的高度撑开，达到高度自适应的目的。而当父元素的**第一级子元素都设置了浮动**时，父元素不在计算其高度，因此就发生了高度塌陷。下面我们就写一个例子来试一下：html的代码：<!DOCTYPE html><html> <head> <me...
复制链接

扫一扫