CSS float：none right left的使用

原创已于 2022-11-28 18:05:57 修改 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #css float #定位

于 2021-08-22 16:19:31 首次发布

网页设计基础专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS float属性的用法，包括left、right浮动的原理，元素的浮动与普通流的关系，以及clear属性对浮动元素的影响。通过实例演示了如何实现块级元素并排、文字环绕图片和2x2布局的常见场景。

float属性

float的属性值有none、left、right，有几个要点：

1、只有横向浮动，并没有纵向浮动。
当元素应用了float属性后，将会脱离普通流，元素脱离【普通文本流】，且不占位置（普通文本流详见：CSS position:static\left\right\fixed使用_小新空荡荡的博客-优快云博客_position 设置left），和position:absolute类似，浮动元素之后的元素相当于没有它一样排版。

例如:span1占了位置

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        #span1 {
            background-color: sandybrown;
            float: left;
        }
    </style>
</head>

<body>
    <span id="span2">
	span2
</span>
    <span id="span1">
	span1
</span>
</body>

</html>

2、浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）

float：left图片别文字环绕图1

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			img {
				width: 50px;
				height: 50px;
				float: left;
			}
		</style>
	</head>
	<body>
		<img src="resource/baidu.jpg">
		百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。 [1]
		“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于
		2000年1月1日在中关村创建了百度公司。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于
		2000年1月1日在中关村创建了百度公司。
	</body>
</html>

3、设置浮动，元素的前一个元素不会受到任何影响

例如：让两个块状元素并排显示，必须让两个块状元素都应用float

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			#left {
				/* 宽度为屏幕的30% */
				width: 30%;
				height: 100px;
				background-color: aqua;
				float: left;
			}

			#right {
				width: 30%;
				height: 100px;
				background-color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
	</body>
</html>

float:left从左开始浮动，right从右开始浮动，如上图设置的float:left，如何改成float:right结果如下：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			#left {
				/* 宽度为屏幕的30% */
				width: 30%;
				height: 100px;
				background-color: aqua;
				float: right;
			}

			#right {
				width: 30%;
				height: 100px;
				background-color: red;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
	</body>
</html>

clear属性配合float使用

1. clear: none -- 允许浮动元素 (默认值) 。
2. clear: left -- 在左侧不允许浮动元素。
clear:left 的含义是如果当前元素的左侧有浮动元素，那么就强制该元素另起一行。

3. clear: right -- 在右侧不允许浮动元素。
clear:right 的含义是如果当前元素的右侧有浮动元素，那么就强制该元素另起一行。

4. clear: both -- 在左右侧均不允许浮动元素。

注意：设置 clear 属性时, 只对当前浮动元素生效, 对于其他的元素标签没有效果，及换行与否是当前元素是否换行 。

例如: 页面中有两个 div , 同时设置 float: left, 当我们对第一个元素设置 clear: right时(如果右侧有浮动元素，那么就强制该元素另起一行，因为此元素就是一行的第一个元素已经是新的一行了), 并不能使第二个元素排列在第二行。如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#left {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
				/* 右侧如果有浮动元素则另起一行，由于是第一个元素了不会另起一行了 */
				clear: right;
			}

			#right {
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
	</body>
</html>

clear常用案例：页面布局，例如：做2x2布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#left {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}

			#right {
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
			}

			#content {
				width: 200px;
				height: 100px;
				background-color: bisque;
				/* 元素两侧如由浮动元素则另起一行 */
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
		<div id="content">
			content
		</div>
	</body>
</html>

postion和float同时使用：

元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。right浮动定位后，再发生的偏移。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			#left {
				/* 宽度为屏幕的30% */
				width: 30%;
				height: 100px;
				background-color: aqua;
				float: left;
			}
			#right {
				width: 30%;
				height: 100px;
				background-color: red;
				/* float position:同时使用先float后postion */
				float: left;
				position: absolute;
				/* 具体body left 50px;压住了left的内容 */
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
	</body>
</html>