当前位置：首页 > article >正文

CSS学习12--清除浮动的本质及处理办法

article 2025/1/23 10:23:55

清除浮动

前言
一、清除浮动的本质
二、清除浮动的方法

前言

为什么要清除浮动？
浮动不占用原文档流的位置，可能会对后面的元素排版产生影响。因此需要在该元素中清除浮动，清除浮动后造成的影响。

一、清除浮动的本质

为了解决父级元素因为子级元素引起内部高度为0的问题。

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		.box1 {
			width: 960px;
			/*height: 100px;*/
			background-color: red;
		}
		.box2 {
			width: 960px;
			height: 200px;
			background-color: purple;
		}
		.son1 {
			width: 150px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}
		.son2 {
			width: 150px;
			height: 100px;
			background-color: pink;
			float: left;
		}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>

父级元素不定义高度是因为不知道盒子里面的内容有多少。
如果son1和son2都浮动了，父级元素没有高度，则会产生重叠。

二、清除浮动的方法

实际上叫做闭合浮动更好，清除浮动是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，基本语法格式：

left
right
both 同时清除左右两侧浮动的影响

额外标签法

在浮动盒子的后面添加一个空盒子。

<div style="clear:both"></div>

优点：通俗易懂，书写方便
缺点：添加许多无意义标签，结构化较差，

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		.box1 {
			width: 960px;
			/*height: 100px;*/
			background-color: red;
		}
		.box2 {
			width: 960px;
			height: 200px;
			background-color: purple;
		}
		.son1 {
			width: 150px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}
		.son2 {
			width: 150px;
			height: 100px;
			background-color: pink;
			float: left;
		}
		.clear {
			clear: both;
		}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="son1"></div>
			<div class="son2"></div>
			<div class="clear"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>

父级添加overflow方法

给父级添加：overflow为hidden|auto|scroll都可以实现。

优点：代码简洁
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		.box1 {
			width: 960px;
			/*height: 100px;*/
			background-color: red;
			overflow: hidden; /*触发BFC 清除浮动*/
		}
		.box2 {
			width: 960px;
			height: 200px;
			background-color: purple;
		}
		.son1 {
			width: 150px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}
		.son2 {
			width: 150px;
			height: 100px;
			background-color: pink;
			float: left;
		}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>

使用after伪元素清除浮动

:after方式为空元素的升级版，好处是不用单独加标签了

.clearfix:after { 
	content: "."; display: block; height: 0; clear: both; visibility: hidden;
	}
.clearfix { 
		*zoom: 1; /**代表ie6.7能识别的*/
	}

优点：符合闭合浮动思想，结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
代表网站：百度、网易、淘宝等

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		.box1 {
			width: 960px;
			/*height: 100px;*/
			background-color: red;
		}
		.box2 {
			width: 960px;
			height: 200px;
			background-color: purple;
		}
		.son1 {
			width: 150px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}
		.son2 {
			width: 150px;
			height: 100px;
			background-color: pink;
			float: left;
		}
		p::after {
			content: "456";
		}
		.clearfix:after { /*:可以*/
			content: "."; /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/
			display: block; /*转换为块级元素*/
			height: 0; /*高度为0*/
			visibility: hidden; /*隐藏盒子*/
			clear: both;
		}
		.clearfix { 
			*zoom: 1; /**代表ie6.7能识别的*/
		}
		</style>
	</head>
	<body>
		<p>123</p>
		<div class="box1 clearfix">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>

使用双伪元素清除浮动

.clearfix:before, .clearfix:after { 
	content: ""; 
	display: table;
	}
.clearfix:after { 
	clear: both;
	}
.clearfix { 
		*zoom: 1; /**代表ie6.7能识别的*/
	}

优点：代码更简洁
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
代表网站：小米、腾讯等

<html>
	<head>
		<style>
		* {
			padding: 0;
			margin: 0;
		}
		.box1 {
			width: 960px;
			/*height: 100px;*/
			background-color: red;
		}
		.box2 {
			width: 960px;
			height: 200px;
			background-color: purple;
		}
		.son1 {
			width: 150px;
			height: 100px;
			background-color: skyblue;
			float: left;
		}
		.son2 {
			width: 150px;
			height: 100px;
			background-color: pink;
			float: left;
		}
		p::after {
			content: "456";
		}
		.clearfix:before,
		.clearfix:after { /*:可以*/
			content: ""; /*内容为空*/
			display: table; /*触发bfc 防止外边距合并*/
		}
		.clearfix::after {
			clear: both;
		}
		.clearfix { 
			*zoom: 1; /**代表ie6.7能识别的*/
		}
		</style>
	</head>
	<body>
		<p>123</p>
		<div class="box1 clearfix">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>