float 属性最初的设计目的是在文本块内使图像浮动，从而让文字环绕在图像的左右两侧，这种效果在报纸版面中很常见。随着时间的推移，这一属性已成为网页设计中实现多列布局的常用工具。最开始，float 主要用于在文本列中调整图像位置，创造简单的布局。后面Web 开发人员发现float 不仅仅可以应用于图像，也可以用于其他元素，从而拓展了它的应用范围。float 被广泛用于整个网页的布局，实现了信息的横向排列（与默认的纵向排列相对）。虽然新的页面布局技术已经出现，使得 float 成为传统的布局方法，但它仍然在某些场景中被使用。
一、浮动的背景知识
浮动是 CSS 中的一个布局属性，用于将元素从正常文档流中移出，并将其放置在容器的左侧或右侧。浮动的最初目的是为了实现文本环绕效果，即使图像或其他元素环绕在文本周围。随着时间的推移，浮动被用于更广泛的布局应用中。
1.1 浮动的基本概念
CSS 中，float 属性用于设置一个元素的浮动行为。其可能的取值包括：
-
left：将元素浮动到其包含块的左侧。 -
right：将元素浮动到其包含块的右侧。 -
none：默认值，元素不浮动，保持在正常文档流中。 -
inherit：继承父元素的浮动属性。
1.2 浮动的影响
当一个元素被设置为浮动时，它会脱离文档流，其他的块级元素会环绕在它周围。浮动
二、简单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动示例</title>
<style>
.container {
width: 600px;
margin: 0 auto;
}
.image {
float: left;
margin: 0 15px 15px 0;
width: 200px;
}
.text {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="示例图像" class="image">
<div class="text">
<p>最开始，float 主要用于在文本列中调整图像位置，创造简单的布局。后面Web 开发人员发现float 不仅仅可以应用于图像，也可以用于其他元素，从而拓展了它的应用范围。</p>
<p>float 被广泛用于整个网页的布局，实现了信息的横向排列（与默认的纵向排列相对）。虽然新的页面布局技术已经出现，使得 float 成为传统的布局方法，但它仍然在某些场景中被使用。</p>
</div>
</div>
</body>
</html>
示例中我们创建了一个容器 container，其中包含一个浮动的图像和一段文本。图像使用 float: left; 属性，使其浮动到容器的左侧，文本将围绕图像排列。
三、让浮动效果可视化
浮动效果在布局中非常重要，为了更好地理解它，我们可以通过一些额外的样式来可视化浮动元素的影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动效果可视化</title>
<style>
.container {
width: 600px;
margin: 0 auto;
border: 2px solid #000;
padding: 10px;
background-color: #f0f0f0;
}
.image {
float: left;
margin: 0 15px 15px 0;
width: 200px;
border: 2px solid #333;
background-color: #fff;
}
.text {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="示例图像" class="image">
<div class="text">
<p>最开始，float 主要用于在文本列中调整图像位置，创造简单的布局。后面Web 开发人员发现float 不仅仅可以应用于图像，也可以用于其他元素，从而拓展了它的应用范围。</p>
<p>float 被广泛用于整个网页的布局，实现了信息的横向排列（与默认的纵向排列相对）。虽然新的页面布局技术已经出现，使得 float 成为传统的布局方法，但它仍然在某些场景中被使用。</p>
</div>
</div>
</body>
</html>
为容器、图像和文本添加了边框和背景色，这样可以更清楚地看到浮动元素的实际效果。
4. 清除浮动
浮动带来的一个常见问题是，浮动元素可能会导致其包含块的高度计算出现问题。为了解决这个问题，我们需要清除浮动。以下是几种常见的清除浮动的方法。
4.1 问题所在
当一个包含浮动元素的容器没有足够的高度时，容器的背景和边框可能会“消失”，这是因为浮动元素脱离了正常的文档流，导致包含块的高度无法自动调整。
4.2 Clearfix 小技巧
Clearfix 是一种常见的解决浮动清除问题的技巧。我们可以使用伪元素来实现清除浮动的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearfix 示例</title>
<style>
.container {
width: 600px;
margin: 0 auto;
border: 2px solid #000;
padding: 10px;
background-color: #f0f0f0;
overflow: hidden; /* 清除浮动 */
}
.image {
float: left;
margin: 0 15px 15px 0;
width: 200px;
border: 2px solid #333;
background-color: #fff;
}
.text {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="示例图像" class="image">
<div class="text">
<p>最开始，float 主要用于在文本列中调整图像位置，创造简单的布局。后面Web 开发人员发现float 不仅仅可以应用于图像，也可以用于其他元素，从而拓展了它的应用范围。</p>
<p>float 被广泛用于整个网页的布局，实现了信息的横向排列（与默认的纵向排列相对）。虽然新的页面布局技术已经出现，使得 float 成为传统的布局方法，但它仍然在某些场景中被使用。</p>
</div>
</div>
</body>
</html>
示例使用 overflow: hidden; 来清除浮动。这样可以确保包含浮动元素的容器自动调整其高度以包裹浮动元素。
4.3 使用 overflow
除了 overflow: hidden;，我们还可以使用其他 overflow 属性值来清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow 示例</title>
<style>
.container {
width: 600px;
margin: 0 auto;
border: 2px solid #000;
padding: 10px;
background-color: #f0f0f0;
overflow: auto; /* 清除浮动 */
}
.image {
float: left;
margin: 0 15px 15px 0;
width: 200px;
border: 2px solid #333;
background-color: #fff;
}
.text {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="示例图像" class="image">
<div class="text">
<p>最开始，float 主要用于在文本列中调整图像位置，创造简单的布局。后面Web 开发人员发现float 不仅仅可以应用于图像，也可以用于其他元素，从而拓展了它的应用范围。</p>
<p>float 被广泛用于整个网页的布局，实现了信息的横向排列（与默认的纵向排列相对）。虽然新的页面布局技术已经出现，使得 float 成为传统的布局方法，但它仍然在某些场景中被使用。</p>
</div>
</div>
</body>
</html>
使用 overflow: auto; 来清除浮动，这种方法适用于容器需要滚动条的情况。
4.4 使用 display: flow-root
display: flow-root 是一种新的清除浮动的方式，它将容器设置为一个新的块级格式化上下文，确保包含浮动元素的高度被正确计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flow-root 示例</title>
<style>
.container {
width: 600px;
margin: 0 auto;
border: 2px solid #000;
padding: 10px;
background-color: #f0f0f0;
display: flow-root; /* 清除浮动 */
}
.image {
float: left;
margin: 0 15px 15px 0;
width: 200px;
border: 2px solid #333;
background-color: #fff;
}
.text {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="示例图像" class="image">
<div class="text">
<p>最开始，float 主要用于在文本列中调整图像位置，创造简单的布局。后面Web 开发人员发现float 不仅仅可以应用于图像，也可以用于其他元素，从而拓展了它的应用范围。</p>
<p>float 被广泛用于整个网页的布局，实现了信息的横向排列（与默认的纵向排列相对）。虽然新的页面布局技术已经出现，使得 float 成为传统的布局方法，但它仍然在某些场景中被使用。</p>
</div>
</div>
</body>
</html>
在这个示例中使用 display: flow-root; 来清除浮动。这种方法可以确保容器正确地包裹浮动元素。
