上查看所有课程
CSS float 属性用于指定元素在父元素内如何浮动。元素可以浮动到容器内的right（右侧）、left（左侧）或none（无）。例如，
div.box2 {
float: right;
background-color: greenyellow;
}浏览器输出
在此，float 属性将第二个 div 元素移动到文档的right（右侧）。
CSS float 语法
float 属性的语法如下：
float: none | left | right | initial | inherit;这里，
none：元素不浮动（默认值）left：元素浮动在其包含块的左侧right：元素浮动在其包含块的右侧initial：值设置为默认值inherit：从其父元素继承浮动属性
注意：float 属性与 position 属性不同。
float 属性主要用于文本围绕元素。position 属性用于在文档内精确控制元素的位置。
示例：CSS float none 值
让我们看一个使用 none 值的 float 属性的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS float</title>
</head>
<body>
<div class="parent">
<img
src="https://www.seekpng.com/png/detail/109-1093815_doraemon-png-png-images-doraemon-png.png"
alt="A flying Doremon image"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. He is a robotic cat from the future who travels back
in time to help a young boy named Nobita. With his magical
gadgets and clever solutions, Doraemon always manages to turn
Nobita's troubles into exciting adventures.
</p>
</div>
</body>
</html>img {
/* default value */
float: none;
width: 100px;
height: 120px;
}
div.parent {
border: 2px solid black;
}浏览器输出
在上面的示例中，我们使用了 float 属性的 none（默认值）。此值不会对现有布局做任何更改。
示例：CSS float right 值
让我们看一个使用 right 值的 float 属性的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS float</title>
</head>
<body>
<div class="parent">
<img
src="https://www.seekpng.com/png/detail/109-1093815_doraemon-png-png-images-doraemon-png.png"
alt="A flying Doremon image"
/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. He is a robotic cat from the future who travels back
in time to help a young boy named Nobita. With his magical
gadgets and clever solutions, Doraemon always manages to turn
Nobita's troubles into exciting adventures. Whether it's
rescuing friends, solving problems, or teaching important life
lessons, Doraemon's kind heart and unwavering friendship make
him a true hero. Kids are captivated by Doraemon's cute
appearance, humorous antics, and the imaginative world he brings
to life, making him an endearing and unforgettable character in
their lives.
</p>
</div>
</body>
</html>div.parent {
border: 2px solid black;
}
img {
/* pushes the image to the right of its container/parent */
float: right;
width: 100px;
height: 110px;
}浏览器输出
在上面的例子中：
float: right;将图像推到父元素 div 的right（右侧）。周围的文本环绕着图像。
示例：CSS float left 值
让我们看一个使用 left 值的 float 属性的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS float</title>
</head>
<body>
<div class="parent">
<img
src="https://www.seekpng.com/png/detail/109-1093815_doraemon-png-png-images-doraemon-png.png"
alt="A flying Doremon image"/>
<p>
Doraemon is a beloved cartoon character adored by kids all over
the world. He is a robotic cat from the future who travels back
in time to help a young boy named Nobita. With his magical
gadgets and clever solutions, Doraemon always manages to turn
Nobita's troubles into exciting adventures. Whether it's
rescuing friends, solving problems, or teaching important life
lessons, Doraemon's kind heart and unwavering friendship make
him a true hero. Kids are captivated by Doraemon's cute
appearance, humorous antics, and the imaginative world he brings
to life, making him an endearing and unforgettable character in
their lives.
</p>
</div>
</body>
</html>img {
/* pushes the image to the left of its container/parent */
float: left;
width: 100px;
height: 120px;
}
div.parent {
border: 2px solid black;
}浏览器输出
在上面的例子中：
float: left;将图像推到父元素 div 的left（左侧）。周围的文本环绕着图像。
注意：CSS clear 属性用于控制与浮动元素相邻的元素的行为。它允许关闭文本环绕，并有助于在文档中保持正常流。
CSS Float 与内联元素
让我们看看浮动与 span 等内联元素如何工作，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS float</title>
</head>
<body>
<p>
<span
>Doraemon is a beloved cartoon character adored by kids all over
the world.
</span>
Doraemon is a robotic cat from the future who travels back in time to
help a young boy named Nobita. With his magical gadgets and clever
solutions, Doraemon always manages to turn Nobita's troubles into
exciting adventures. Whether it's rescuing friends, solving
problems, or teaching important life lessons, Doraemon's kind heart
and unwavering friendship make him a true hero. Kids are captivated
by Doraemon's cute appearance, humorous antics, and the imaginative
world he brings to life, making him an endearing and unforgettable
character in their lives.
</p>
</body>
</html>span {
/* pushes the span element to the right of its container */
float: right;
width: 190px;
border: 1px solid black;
background-color: greenyellow;
margin-left: 12px;
}
p {
padding: 8px;
border: 2px solid black;
}浏览器输出
在上面的示例中，float: right 将内联元素 span 移动到 parent 的右侧。
注意：内联浮动的要点
- 浮动的内联文本元素应始终设置宽度值。否则，它们将扩展以适应其内容，对于少量内容可能不是问题。但这对于大量内容可能会有问题。
图像具有固有的宽度和高度，因此添加宽度和高度不是必需的。
- 浮动的内联元素表现得像块元素。我们可以为浮动的内联元素的所有侧面添加宽度、高度、边距和填充。
- 浮动元素中的边距不会折叠。在正常流中，相邻的上边距和下边距会折叠并取较大边距的值。
CSS Float 与块元素
让我们看一个 float 属性与 div 等块元素如何工作的示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS float</title>
</head>
<body>
<div class="parent">
<p class="float">
Doraemon is a beloved cartoon character adored by kids all over
the world. Doraemon is a robotic cat from the future who travels
back in time to help a young boy named Nobita.
</p>
<p>
With his magical gadgets and clever solutions, Doraemon always
manages to turn Nobita's troubles into exciting adventures.
Whether it's rescuing friends, solving problems, or teaching
important life lessons, Doraemon's kind heart and unwavering
friendship make him a true hero. Kids are captivated by
Doraemon's cute appearance, humorous antics, and the imaginative
world he brings to life, making him an endearing and
unforgettable character in their lives.
</p>
</div>
</body>
</html>p.float {
/* pushes the p element to the left of its container */
float: left;
/* width is necessary */
width: 300px;
border: 2px solid black;
background-color: greenyellow;
}
/* styles the div element with parent class */
div.parent {
padding: 4px;
border: 4px solid black;
background-color: yellow;
}浏览器输出
在此，float: right 声明将块元素 p 移动到父 div 元素的左侧。
同样，浮动块元素之后的其他非浮动段落会在文档中保持正常流。
在上面的示例中，带有yellow（黄色）背景的段落按预期占据了整个宽度，同时也容纳了浮动的段落元素。它围绕浮动的段落元素环绕文本，并识别其存在。
注意：浮动块元素时要记住的要点
- 当使用
float属性时，应为块级元素设置width值。否则，默认宽度值为auto，这会导致它填充父元素的整个宽度。
因此，使用 float 属性的效果将变得不可见。
- 浮动的块元素不会比其在文档中的原始位置更高。