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

最新推荐文章于 2026-05-09 06:27:16 发布

原创最新推荐文章于 2026-05-09 06:27:16 发布 · 2.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记专栏收录该内容

32 篇文章

订阅专栏

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

单伪元素方法：

<!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>