CSS：浮动定位与清除

最新推荐文章于 2025-05-16 09:49:29 发布

原创最新推荐文章于 2025-05-16 09:49:29 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#浮动定位 #清除浮动

前端开发专栏收录该内容

31 篇文章

订阅专栏

浮动定位：

（浮动定位是CSS布局中非常重要的手段之一）

float浮动属性可以设置对象左右移动，直到其边缘碰到父元素的边框或另一个浮动元素的边缘。

CSS中包括DIV在内的所有元素都可以以浮动方式进行显示，其优点是浮动框不在文档的普通流（脱离文档流），使得排版更加简单，且具有良好的伸缩性。

float属性可以设置为：left、right、none、inherit ，默认值为none。

①设置为left或right：元素会向其父元素的左侧或右侧边缘浮动。

②设置为none：表示不做任何操作。

③设置为inherit：继承父元素的属性。

例一：HTML:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<div id="div1">我是div1</div>
		<div id="div2">我是div2</div>
	</body>

</html>

CSS:

#div1 {
	background-color: orange;
	height: 300px;
	width: 300px;
	float: left;
}
#div2 {
	background-color: coral;
	height: 400px;
	width: 500px;
}

效果图：

注：这里给div1设置了float属性为left；div2的float属性默认为none；则div1脱离文档流并向左移动，直到其边缘碰触到包含框（这里是body标签）的边缘为止。效果：div2会顶到原div1的位置，其左边框与div1的左边框重合，而文字会围绕着div1排列。

例二：更改：给例一中的div2增加属性：float:left;

效果图：

综上：也可以给div2设置float：right；也可以交换两个div的位置……由此可见，通过设置不同的浮动属性值，可以灵活地定位DIV元素的位置，以达到布局网页的目的。

清除浮动：

clear的属性有：none、left、right、both，默认值为none。

①设置为left或right:清除float对左侧或右侧的影响。

②设置为both：左右都有浮动的块元素，而新的块元素两侧都不希望受到影响

③设置为none：表示不做任何操作。

例三：给例二中增加div3，并添加不同的clear属性

效果图：①（给div3添加clear:none/不写）②（给div3添加clear：left;）③（给div3添加clear：right/both）

实际项目中清理浮动遇到的问题：

一：浮动产生的原因：

一般浮动是什么情况呢？一般是一个盒子里使用了CSS的float浮动属性，导致父级对象盒子不能被撑开，这样CSSfloat浮动就产生了。

（div1与div2是包含在黑色边框div下的，由于给div1和div2使用了float属性，使他们浮动起来，无法撑开父元素）

二：浮动产生的负作用：

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background 背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

三：清除浮动的方法：

以一个例子说明不同解决方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div1 {
				background-color: orange;
				height: 100px;
				width: 100px;
				float: left;
			}
			#div2 {
				background-color: coral;
				height: 100px;
				width: 100px;
				float: right;
			}
			.div {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div id="div1">我是div1</div>
			<div id="div2">我是div2</div>
		</div>
	</body>
</html>

①：给父级元素设置一定的高度，一般设置为当前div的内容高度。

方法：给父元素div增加属性：height：100px；

②：clear:both;清除浮动（在css样式与html中分别添加如下代码）

	.clearfix{		
                clear: both;
	 }

<div class="clearfix"></div>

③：对父级元素增加属性：overflow：hidden；

④：伪元素清理浮动：（在原基础上增加如下css代码）

			.div::before,.div::after{
				display: block;
				content: "";
				clear: both;
			}

综上，就是浮动定位的内涵与清除浮动的方法。希望本篇文章对大家有所帮助！（欢迎大家补充或交流）