上查看所有课程
CSS 的 float 属性允许我们将元素定位在容器或父元素的左侧或右侧。元素会脱离正常文档流，允许后续的元素环绕浮动元素。
float 属性可以具有以下值之一：
none：元素不浮动（默认值）left：元素移动到其包含块的左侧right：元素移动到其包含块的右侧initial：将值设置为默认值inherit：继承其父元素的浮动属性
float 属性可用于创建各种布局设计、文本环绕图像、多列布局和图片库。
让我们通过 float 属性来看几个布局。
文本环绕图像
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 Layout</title>
</head>
<body>
<div class="parent">
<img
src="https://freepngimg.com/thumb/pokemon/37475-6-pikachu-transparent-image-thumb.png"
alt="Pokemon Picture"
/>
<p>
Pokémon, short for "Pocket Monsters," is a globally beloved
franchise that originated in Japan. It is created by Satoshi
Tajiri and Ken Sugimori, and captures the imagination of
millions with its unique blend of adventure, friendship, and the
pursuit of becoming a Pokémon Master. In this fictional world,
trainers embark on journeys to capture, train, and battle
creatures known as Pokémon. Each Pokémon possesses its own
unique abilities, characteristics, and types, allowing for
strategic battles and endless combinations.
</p>
</div>
</body>
</html>img {
/* floats the image to the right */
float: right;
width: 80px;
height: 80px;
border: 2px solid black;
}
div.parent {
border: 2px solid black;
}浏览器输出
在上面的示例中，float: right 将图像从正常文档流推到父 div 元素的 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 Layout</title>
</head>
<body>
<div class="parent">
<img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg"
alt="Northern Winter Sky Image"/>
<img src="https://images.pexels.com/photos/1142950/pexels-photo-1142950.jpeg"
alt="Shining Stars Image"/>
<img src="https://images.pexels.com/photos/3933881/pexels-photo-3933881.jpeg"
alt="A River Flowing Image"/>
<img src="https://images.pexels.com/photos/5409751/pexels-photo-5409751.jpeg"
alt="A cloudy Mountain Image"/>
<img src="https://images.pexels.com/photos/4101555/pexels-photo-4101555.jpeg"
alt="A Winter Rainbow Image"/>
</div>
</body>
</html>img {
/* floats all the images to the left */
float: left;
width: 240px;
height: 180px;
margin: 2px;
}
div.parent {
border: 4px solid black;
overflow: auto;
}浏览器输出
在上面的例子中：
float: left;将图像推到父 div 元素的 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 Layout</title>
</head>
<body>
<header>Header</header>
<!-- Creating three column-based layout -->
<main>
<aside class="left">Sidebar 1</aside>
<section>Section</section>
<aside class="right">Sidebar 2</section>
</main>
<footer>Footer</footer>
</body>
</html>header {
height: 80px;
background-color: orange;
text-align: center;
}
aside {
width: 25%;
/* floats both sidebar to left */
float: left;
height: 200px;
background-color: greenyellow;
text-align: center;
}
section {
/* floats the section to the left */
float: left;
width: 50%;
height: 200px;
background-color: gold;
text-align: center;
}
footer {
/* moves the footer below the floated elements, else
footer starts behind the floated elements */
clear: both;
border: 2px solid black;
height: 40px;
background-color: orange;
text-align: center;
}浏览器输出
在上面的示例中，float 属性用于在网页上创建基于三列的布局。
aside 和 section 元素的三个列使用 float: left 并排浮动。浮动元素的顺序与其在 HTML 文档中的顺序相同。
clear 属性与 footer 元素一起使用，将其推到浮动元素下方。
float 属性最初是为了用于将文本环绕在图像周围。然而，开发人员发现他们可以利用浮动来实现复杂的布局，并开始使用 float 属性创建布局。
在基于 float 的布局之前，人们使用表格来创建网页布局。
现代 CSS 提供了 flexbox 和 grid 属性来创建复杂的布局，而基于 float 的布局被认为是过时的。
注意：CSS clear 属性用于调整相邻元素在环绕浮动元素时的行为，允许关闭环绕。