CSS3——解决父级元素包裹子级元素的方法（伪元素+其他）

最新推荐文章于 2024-09-07 22:06:06 发布

原创最新推荐文章于 2024-09-07 22:06:06 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

css 同时被 3 个专栏收录

28 篇文章

订阅专栏

css3

24 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

本文介绍如何使用伪元素清除浮动，保持页面布局整洁。通过CSS伪元素::after，设置clear:both和display:block，确保父级元素能正确包裹所有子元素，同时探讨了其他清除浮动的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用伪元素清除浮动：

你要解决浮动的为题必须在父级的逻辑的后面加上一个p元素来清除浮动吧，你加完p元素之后破坏结构了，不好，咱相加，又不能加，就用伪元素最合适了吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.demo::after{
				content: "";
				clear: both;
			}
			.demo{
				border: 1px solid black;
			}
			.demo1{
				float: left;
				width: 100px;
				height: 100px;
				background-color: black;
				color: #fff;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">1</div>
			<div class="demo1">2</div>
			<div class="demo1">3</div>
		</div>
	</body>
</html>

你看看好使吗？