单伪元素跟双伪元素清除浮动方法

最新推荐文章于 2025-05-17 23:12:36 发布

S_1978P1

最新推荐文章于 2025-05-17 23:12:36 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/S_1978P1/article/details/81482486

笔记专栏收录该内容

32 篇文章

订阅专栏

本文介绍了两种使用CSS伪元素实现的清除浮动的方法：单伪元素法和双伪元素法。这两种方法均通过在父级元素上添加伪元素并设置clear:both来达到清除内部浮动元素的效果，适用于不同的浏览器环境。

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

单伪元素方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
        .clearfix:after{
                content:"";
                height:0;
                lin-height:0;
                display:block;
                visibility:hidden;
                clear:both;
            }
        .clearfix:after{
                *zoom:1;        /*针对IE6/IE7*/
            }
    </style>
</head>
<body>
	
</body>
</html>

双伪元素方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.clearfix:before,.clearfix:after{
			content:"";
			display:table;
		}
		.clearfix:after{
			clear:both;
		}
		.clearfix:after{
			*zoom:1;
		}
	</style>
</head>
<body>
	
</body>
</html>