解决高度坍塌和外边距重叠问题

最新推荐文章于 2023-07-22 17:13:11 发布

胡先生的博客

最新推荐文章于 2023-07-22 17:13:11 发布

阅读量136

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_47683287/article/details/109272180

版权

解决高度坍塌和外边距重叠问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 解决高度塌陷和外边距重叠问题clearfix */
			.clearfix::before,
			.clearfix::after{
				content:" ";
				display:table;
				clear:both;
			}
			/* 外边距重叠也可以直接给父元素设置overflow:hidden */
			
			.box1{
				width: 400px;
				height: 400px;
				background-color: #0000FF;

			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: #9932CC;
				margin-top: 100px;
				
				
			}
		</style>
		
		
		
		
		
		
		
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
			
			
		</div>
		
		
		
		
		
	</body>
</html>