CSS 清除浮动

最新推荐文章于 2025-07-10 21:17:09 发布

原创最新推荐文章于 2025-07-10 21:17:09 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浮动 #css #消除浮动

CSS 专栏收录该内容

4 篇文章

订阅专栏

浮动

为了让多个块级元素显示在一行。
块级元素一行只显示一个，行内元素一行显示多个，这种正常的显示方式称为“标准流”。
所以浮动是脱标的。

但浮动也有几条性质

浮动在父级元素里面不会超过内边距和边框的范围（父级元素设置了高度）
如果子盒子有一个浮动了，其余的子盒子都应浮动，否则由于浮动的盒子不占位置会影响其他盒子位置
有默认的隐式转换块级元素转换为行内块元素

消除浮动

为了解决父级元素（由于内容高度不确定，未设置高度）由于子集浮动引起的内部高度为0的问题。

案例：想要构建如下布局
随便写的颜色不要嫌丑：）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {
		border: 1px solid blue;
		width: 300px;
	}
	.big {
		width: 100px;
		height: 100px;
		background-color: red;
		float: left;
	}
	.small {
		width: 100px;
		height: 150px;
		background-color: purple;
		float: right;
	}
	.footer {
		width: 300px;
		height: 30px;
		background-color: #ccc;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

在这里插入图片描述
但给红色和紫色盒子加入float后，由于未给蓝色框盒子设置高度，高度为零。

解决方法：

额外标签法
父级添加overflow属性
使用after伪元素
使用before和after双伪元素

额外标签法

在最后一个浮动标签后添加属性为clear: both | left | right;的标签（一般写both）。

.clear {
		clear: both;
	}

<div class="big"></div>
<div class="small"></div>
<div class="clear"></div>

父级添加overflow属性

出发BFC方式

.father {
		border: 1px solid blue;
		width: 300px;
		overflow: hidden;  /*消除该标签子级浮动*/
	}

使用after伪元素

添加clearfix类给父级元素

	/*清除浮动*/
	.clearfix:after { /*正常浏览器 清除浮动*/
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
		*zoom: 1; /*zoom 1 就是ie6清除浮动方式  * 代表ie7以下版本所识别*/
	}

<div class="father clearfix">  /*多标签类*/

使用before和after双伪元素

.clearfix:before, .clearfix:after {
		content: "";
		display: table;
	}
	.clearfix:after {
		clear: both;
	}
	.clearfix {
		*zoom: 1;
	}


<div class="father clearfix">