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

css浮动及清除浮动副作用的三种解决方法

news 2025/8/1 18:20:16

css浮动及清除浮动副作用的三种解决方法

文章目录

css浮动及清除浮动副作用的三种解决方法
- 一、浮动定义
- 二、浮动元素设置
- 三、清除浮动副作用方法一
- 四、清除浮动副作用方法二
- 五、清除浮动副作用方法三

一、浮动定义

浮动（Float）是CSS中一种布局技术，用于使元素沿其容器的左侧或右侧浮动，并允许文本和内联元素围绕它。浮动的常见应用是在创建多列布局或在文本中插入图片时。

理解：浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

二、浮动元素设置

1、使用 float 属性可以将元素向左或向右浮动。例如，float: left; 将使元素向左浮动，允许其他内容环绕其右侧。

			.myclass1{width: 50%;float: left;}

2、浮动的副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

3、浮动的清除：当一个元素浮动后，其父元素的高度将不再自动扩展以适应浮动元素的高度。这时需要清除浮动。

理解：想将盒子向左或右排列，就需要使用浮动，但浮动会导致父级元素被撑开管不住子级元素，就需要方法清除这个副作用。

三、清除浮动副作用方法一

对父级元素设置适合CSS高度

这里使用类选择器选中父级div,用id选择器选择两个子级div，并分别增加样式，最后给子级div增加向左浮动样式。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div></div></body>
</html>

浮动副作用如图所示：

在这里插入图片描述

解决方法：对父级元素设置适合高度样式清除浮动，这里对父级div设置一定高度即可，父级div需要大于子级div的高度即可，这里我们知道内容高度是50PX+上下边框为2px，这样具体父级高度为52px

.Myclass{height: 52px;border: blue 3px solid;}

效果如图：
在这里插入图片描述

四、清除浮动副作用方法二

使用clear:both清除浮动副作用

同上，分别给父级div和子级div增加样式，并给子级div增加向左浮动样式。

解决方法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div一个clear：both就可清除浮动副作用。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}.clear{clear: both;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div><!--这里加一个空盒子用于清除浮动--><div class="clear"></div></div></body>
</html>

效果如图：

在这里插入图片描述

五、清除浮动副作用方法三

给父级div定义 overflow:hidden

同上，分别给父级div和子级div增加样式，并给子级div增加向左浮动样式。

解决方法：对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.Myclass{border: blue 3px solid;overflow: hidden;}#box01{width: 50px;height: 50px;border: red 2px solid;float: left;}#box02{width: 50px;height: 50px;border: green 2px solid;float: left;}</style></head><body><div class="Myclass"><div id="box01"></div><div id="box02"></div></div></body>
</html>