CSS——4.浮动、清除浮动

买奶茶的小孩

已于 2022-06-13 14:57:57 修改

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css css3 前端 html

于 2022-06-13 14:56:36 首次发布

本文链接：https://blog.csdn.net/m0_46279684/article/details/125257558

前端专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了CSS布局中的浮动机制，包括设置浮动的作用、语法、特性及其在实际布局中的应用。浮动主要用于让多个盒子水平排列，解决文字环绕图片等问题。同时，文章讨论了清除浮动的原因和方法，如额外标签法、父级添加overflow属性、使用伪元素等，以解决父级元素高度塌陷的问题，确保布局的稳定性。

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

浮动float

CSS布局的三种机制

1.普通流（标准流）

块级元素会独占一行，从上向下顺序排列，例如：div、hr、p、h1~h6、ul、ol、dl、form、table等
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行，例如：span、a、i、em等

2.浮动

让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示

3.定位

将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的js特效

为什么要设置浮动？

虽然我们可以用之前学到过的display：inline-block实现块元素在一行显示，

但块元素之间会有空白缝隙，也不能实现元素之间的对齐。

浮动的作用

可以让多个盒子（div）水平排列成一行
可以实现盒子的左右对齐等等
浮动最早是用来控制图片实现文字环绕图片效果的

语法

选择器 {float：属性值；}

属性值	描述
none	设置对象不浮动（默认值）
left	设置对象向左浮动
right	设置对象向右浮动

浮动float——漂浮

脱离标准流，漂浮起来，不占用原有的位置，浮动在标准流的上面，所以第二个标准流会躲到浮动盒子的下面

浮动float——特性

给div盒子添加浮动之后，仍然是块级元素，默认相当于转换成了inline-block，但没有白色缝隙。

如果想要几个盒子都在一行显示，所有盒子div都要设置浮动属性。

注意：浮动的元素互相贴在一起，如果父级的宽度装不下这些浮动的盒子，多出的盒子就会另起一行对齐。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>买奶茶的小孩</title>
	<style>
		.div1,
		.div2,
		.div3 {
			width: 300px;
			height: 300px;
			background-color: skyblue;
			float: left;
		}
		.div2 {
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="div1">div1</div>
	<div class="div2">div2</div>
	<div class="div3">div3</div>
</body>
</html>

浮动float——应用

浮动和标准流的父盒子搭配

浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。

浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>买奶茶的小孩</title>
	<style>
		.div1 {
			width: 500px;
			height: 500px;
			background-color: pink;
			border: 30px solid purple;
			padding: 10px;
		}
		.div2 {
			width: 200px;
			height: 200px;
			background-color: skyblue;
			float: right;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

注意：

浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流。
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，防止出现问题。

1.上一个盒子浮动

2.上一个盒子不浮动

清除浮动clear

为什么清除浮动？

父级盒子在很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

子盒子是标准流，父盒子虽然没有高度，但是会撑开父盒子的高度。

清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法

选择器 {clear：属性值；}

属性值	描述
none	不清除浮动
left	清除左侧浮动
right	清除右侧浮动
both	清除两侧浮动

1.额外标签法（隔墙法）

W3C推荐：在最后一个浮动元素的末尾添加一个空的标签如：<div style="clear:both"></div>，或者其他标签br等即可。

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

2.父级添加overflow属性方法

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

优点：代码简洁
缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
overflow是溢出的意思，所以overflow：hidden会把多余的部分切掉。auto：有垂直滚动条，scroll：水平和垂直滚动条。

3.使用after伪元素清除浮动

：after方式为空元素额外标签法的升级版，好处是不用单独加标签了。给父级元素添加clearfix样式。

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix {
	*zoom: 1; /*ie6/ie7 专门清除浮动样式*/
}

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。

4.使用双伪元素清除浮动

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

优点：代码更简洁
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。

什么时候清除浮动？

父级没高度
子盒子浮动了
影响下面布局