高度塌陷的产生方式和解决方法

最新推荐文章于 2022-05-10 20:14:56 发布

L_shuo

最新推荐文章于 2022-05-10 20:14:56 发布

阅读量339

点赞数 3

文章标签： html css css3

本文链接：https://blog.csdn.net/L_shuo/article/details/104455440

版权

1.什么是高度塌陷？
父元素高度自适应的情况下，子元素全部浮动，造成父元素的高度为0
例如：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	.box{
		width: 500px;
		border: 1px solid red;
	}
	.left{
		float: left;
		height: 300px;
		width:200px;
		background: yellow;
	}
	.right{
		float: left;
		height: 300px;
		width:200px;
		background: blue;
	}
	.box2{
		height: 100px;
		width: 600px;
		background: pink;
	}
</style>
<body>
	<div class="box">
		<div class="left">我是左边</div>
		<div class="right">我是右边</div>
	</div>
	<div class="box2">我是box2</div>
</body>
</html>

在这里插入图片描述这个时候可以看到父元素box1就产生了高度塌陷
2.解决方法
1.给父元素添加固定高度
缺点：适合高度固定的布局

.box{
	width: 500px;
	border: 4px solid red;
	/*添加高度*/
	height: 300px;
	}

在这里插入图片描述
2.给父元素添加overflow：hidden;（兼容IE6的话，可以再添加属性:zoom:1;）
缺点：溢出内容会被裁剪隐藏

.box{
		width: 500px;
		border: 4px solid red;
		overflow: hidden;
		/*兼容IE6*/
		zoom:1;
	}

在这里插入图片描述
3.给所有浮动元素最后添加一个空标签，并声名clear:both;height:0;overflow:hidden;
缺点：造成代码的冗余

<style type="text/css">
	.box{
		width: 500px;
		border: 4px solid red;
	}
	.left{
		float: left;
		height: 300px;
		width:200px;
		background: yellow;
	}
	.right{
		float: left;
		height: 300px;
		width:200px;
		background: blue;
	}
	.clean{
		clear: both;
		height: 0;
		overflow: hidden;
	}
	.box2{
		height: 100px;
		width: 600px;
		background: pink;
	}
</style>
<body>
	<div class="box">
		<div class="left">我是左边</div>
		<div class="right">我是右边</div>
		<div class="clean"></div>
	</div>
	<div class="box2">我是box2</div>
</body>

在这里插入图片描述
4.万能清除法
给塌陷的元素后面添加 :after 伪类
没有缺点，适合整站开发！！

<style type="text/css">
	.box{
		width: 500px;
		border: 4px solid red;
	}
	.left{
		float: left;
		height: 300px;
		width:200px;
		background: yellow;
	}
	.right{
		float: left;
		height: 300px;
		width:200px;
		background: blue;
	}
	.box:after{
		/*添加空元素*/
		content: "";
		/*转换为块状元素*/
		display: block;
		/*清楚两边浮动*/
		clear: both;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}
	.box2{
		height: 100px;
		width: 600px;
		background: pink;
	}
</style>
<body>
	<div class="box">
		<div class="left">我是左边</div>
		<div class="right">我是右边</div>
	</div>
	<div class="box2">我是box2</div>
</body>

在这里插入图片描述
总结：
如果你是只做一个小的单独的主页，并且高度固定，建议用第一种方法，
如果高度是自适应的话用第二种方法，第三种方法不推荐使用，第四种方法适合整站开发，在公共类定义一个类名，直接调用就行：
例如：

定义万能清除法的类名

.clean:after{
		content: "";
		display: block;
		clear: both;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}

调用方式：给高度塌陷的元素添加类名

<div class="box clean">
		<div class="left">我是左边</div>
		<div class="right">我是右边</div>
	</div>

L_shuo

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫