CSS浮动定位（float）

最新推荐文章于 2022-03-09 17:55:09 发布

brightan

最新推荐文章于 2022-03-09 17:55:09 发布

阅读量410

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/The_Light_/article/details/97612626

版权

css 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

CSS浮动定位通过设置float属性为left或right，使元素浮动并影响周围内容布局。浮动盒会向左或右移动，直到碰到边界。若没有足够空间，会向下移动。英文行框不会被压缩，但中文可以实现文本环绕效果。浮动元素旁的行内级盒在浮动时会被推至右边。

摘要由CSDN通过智能技术生成

CSS浮动定位

在CSS中设置一个盒子的float值为left或者right，就会使得盒子浮动起来。

浮动盒子的特点：

浮动盒子向左或者右移动，直到碰到包含块的边界（content）或者另一个浮动盒的外边界（margin）

<!DOCTYPE html>
<html lang="en">
	<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>Document</title>
		<style>
			.outer-box{
				width: 500px;
				height: 500px;
				background-color: pink;
			}
			.float{
				width: 200px;
				height: 200px;
				float: left;
			}
			.float1{
				background-color: red;
			}
			.float2{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="outer-box">
			<div class="float float1"></div>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus beatae, mollitia dolore, dignissimos neque eius repudiandae maiores perspiciatis saepe ea quae officiis minima, laborum debitis iste nisi placeat? Eaque, molestias!
			<div class="float float2"></div>
		</div>
	</body>
</html>

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

如果存在行框，浮动盒的上外边界（margin）和当前行框的上边界对齐
如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者再没出现其它浮动

<!DOCTYPE html>
<html lang="en">
	<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>Document</title>
		<style>
			.p {
				width: 10em;
				border: solid aqua;
			}
			span{
				float: left;
				width: 5em;
				height: 5em;
				border: solid blue;
			}
		</style>
	</head>
	<body>
		<p class="p">
			Supercalifragilisticexpialidocious
            <span></span>
		</p>
	</body>
</html>