浮动之清除after伪元素

最新推荐文章于 2024-01-21 22:40:49 发布

A 神

最新推荐文章于 2024-01-21 22:40:49 发布

阅读量266

点赞数

分类专栏： css 文章标签：浮动之after伪元素

本文链接：https://blog.csdn.net/weixin_42378409/article/details/103475672

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		<!-- 清除伪类浮动-->
		.clearfix:after{
			content: "";
			display: block;
			height: 0;
			clear:both;
			visibility: hidden;
		}
		<!-- 兼容ie 6,7-->
		.clearfix{*zoom:1;}
		
		.father{
			background-color: pink;
			width: 600px;
			border: 1px solid #000;
		}
		.bigson{
			float: left;
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.twoson{
			float: left;
			width: 300px;
			height: 300px;
			background-color: yellow;
		}
		.two{
			width: 500px;
			height: 300px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="father clearfix">
	<div class="bigson"></div>
	<div class="twoson"></div>
	</div>
	<div class="two"></div>
</body>
</html>

在这里插入图片描述