浮动引起的高度塌陷最好的解决方案

Gjanuary

已于 2022-02-14 17:09:16 修改

阅读量314

点赞数

分类专栏：前端学习记录

于 2022-02-14 16:51:49 首次发布

本文链接：https://blog.csdn.net/Gjanuary/article/details/122927875

版权

css

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- 移动端必设置 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<title>浮动引起的高度塌陷解决方案</title>
	<style>
		.parent{
			border: 1px solid rebeccapurple;
		}
		.child{
			background:burlywood;
			width: 200px;
			height: 200px;
			float: left;
		}
		.clearFix::before,.clearFix:after{
				content:'';
				display:table;
				clear:both;

			}

	
		/* 
		 	终极版本同时
			 	（1）解决高度塌陷
				（2）外边距重叠问题
			.clearFix::before,
			.clearFix:after{
				content:'';
				display:table;
				clear:both;

			}
		 */
	</style>

</head>
<body>
	<div class="parent clearFix">
		<div class="child"></div>
	</div>
	
</body>
</html>