HTML：利用:after伪元素清除浮动

最新推荐文章于 2025-03-10 19:40:59 发布

龙雪zzZ

最新推荐文章于 2025-03-10 19:40:59 发布

阅读量8.3k

点赞数

分类专栏： # Java Web 文章标签： Html after

本文链接：https://blog.csdn.net/DragonGirI/article/details/81902849

版权

Java Web 专栏收录该内容

9 篇文章

订阅专栏

:after伪元素和:before伪元素分别用于在元素之后和之前添加内容，实际网页开发过程中:after伪元素比较常用，借助:after伪元素一般用于清除浮动，利用伪元素来清除浮动是常规浮动清除的三种方式之一，也是最常用、最为推荐的一种方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>：after清除浮动</title>
		<style>
			.out {
				width:200px;
				border: 5px solid red;
			}
			
			.out:after{
			    content: '';
			    display: block;
			    width: 0px;
			    height: 0px;
			    clear: left;
			}
			
			.in {
				width: 100px;
				height: 100px;
				float:left;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="in" style="background-color: blue;"></div>
			<div class="in" style="background-color: green;"></div>
		</div>
	</body>
</html>

效果如图：