css之float详解

最新推荐文章于 2025-07-01 16:31:37 发布

机器猫zhao

最新推荐文章于 2025-07-01 16:31:37 发布

阅读量2.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html css 兼容性

本文链接：https://blog.youkuaiyun.com/zx_p24/article/details/53305145

css 专栏收录该内容

11 篇文章

订阅专栏

浮动float属性值：

left：元素向左浮动

right：元素向右浮动

none：默认值。元素不浮动。

inhert：规定从父元素继承float的属性值；

浮动会让元素本身脱离文档流，对后面的元素会产生影响，会让后面元素文字环绕到浮动元素上。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
	}
	.box2{
		background: green;
	}
	.box3{
		background: blue;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>

默认情况下，块元素不加浮动显示结果：

先给box1浮动，box2会占据到box1原来位置上，重合部分box1会覆盖box2上，也就是box2文字环绕到box1上

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
		float: left;
	}
	.box2{
		background: green;
	}
	.box3{
		background: blue;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>

box1浮动后显示如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
		float: left;
	}
	.box2{
		background: green;
		float: left;
	}
	.box3{
		background: blue;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>

再给box2浮动，box3会占据到box2原来位置上，重合部分box2会覆盖box3上，也就是box3文字环绕到box2上

box2浮动显示如下：

最后对box3浮动，由于box3文字太多，他的宽度是根据其内容宽度来决定，所以会挤下来，效果显示如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		background: red;
		float: left;
	}
	.box2{
		background: green;
		float: left;
	}
	.box3{
		background: blue;
		float: left;
	}
	</style>
</head>
<body>
	<div class="box1">文字一</div>
	<div class="box2">文字二文字二</div>
	<div class="box3">文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三文字三</div>
</body>
</html>