前端四种清除浮动的方法（css）

最新推荐文章于 2025-06-02 22:13:22 发布

龍龍哥

最新推荐文章于 2025-06-02 22:13:22 发布

阅读量404

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html,css 文章标签：前端 css 清除浮动

本文链接：https://blog.youkuaiyun.com/baldicoot_/article/details/98627817

html,css 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍四种常见的清除浮动布局的方法：子级标签clear清除法、父级标签overflow清除法、after伪元素清除法以及双伪元素清除法。每种方法都提供了具体的实现步骤和CSS代码示例，帮助开发者有效解决浮动元素引起的布局问题。

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

一，子级标签clear清除法

			当完成局域性浮动后，找到最后一个浮动的盒子。
			在盒子的后面添加一个单独的div
				...
				...(最后一个浮动的盒子)
				<div class="clear">    </div>
				然后在css的样式里面添加如下标签
				<style>
				...
				...
				.clear {
					clear:both;
					}
				</style>

二，父级标签overflow清除法

			当完成局域性浮动后，找到包裹这些浮动的父级盒子。
			在父盒子的css标签下添加overflow
			<style>
				...
				...
				.XXX {
					...
					...
					overflow:hidden;
					}
			</style>
			(XXX为父级盒子的随机性名称)

三，after伪元素清除法

			直接在css样式中写下如下代码，
			后期制作浮动时，谁需要谁调用。
			<style>
				...
				...
				.clearfix:after {
					content:"";
					display:block;
					height:0;
					clear:both;
					visibility:hidden;
					}
				.clearfix: {
					*zoom:1;      /*为i6/i7老式浏览器准备*/
				}
			</style>

四，双伪元素清楚法

			直接在css样式中写下如下代码，
			后期制作浮动时，谁需要谁调用。
			<style>
				...
				...
				.clearfix:before, .clearfix:afte  {
					content:"";
					display:table;
					}
				.clearfix:after {
					clear:both;
					}
				.clearfix: {
					*zoom:1;      /*为i6/i7老式浏览器准备*/
				}
			</style>