浮动

最初用于在文本块内浮动图像，float 属性成为网页上创建多列布局最常用的工具之一。随着 Flexbox 和 Grid 的出现，它现在已恢复到最初的目的，正如本文所解释的那样。

先决条件 HTML 基础知识（学习 HTML 简介）以及对 CSS 工作原理的了解（学习 CSS 简介）。
目标 学习如何在网页上创建浮动功能，以及如何使用 clear 属性和其他方法清除浮动。

浮动的背景

float 属性是为了让 Web 开发人员能够实现涉及图像在文本列内浮动的布局而引入的，文本在图像的左侧或右侧环绕。这就像你可能在报纸布局中看到的那样。

但 Web 开发人员很快意识到，你可以浮动任何东西，而不仅仅是图像，因此浮动的使用范围更广，例如，用于有趣的布局效果，例如 首字母下沉。

浮动通常用于创建整个网站布局，其中包含多列信息浮动，以便它们并排显示（默认行为是这些列按在源代码中出现的顺序一个接一个地显示）。现在有更新、更好的布局技术可用。在这种方式下使用浮动应该被视为一种 遗留技术。

在本文中，我们将只关注浮动的正确用法。

一个浮动示例

让我们探索浮动的使用。我们将从一个围绕元素浮动文本块的示例开始。你可以通过在你的计算机上创建一个新的 index.html 文件，用一个 HTML 模板 填充它，并在适当的位置插入以下代码来进行操作。在该部分的底部，你可以看到最终代码的外观示例。

首先，我们将从一些 HTML 开始。将以下内容添加到你的 HTML 主体中，删除之前主体中包含的任何内容

html
<h1>Float example</h1>

<div class="box">Float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

现在将以下 CSS 应用于你的 HTML（使用 <style> 元素或 <link> 连接到单独的 .css 文件 - 由你选择）。

css
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 Arial,
    Helvetica,
    sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
}

如果你保存并刷新，你会看到与你预期的大致相同的内容：该框位于文本的上面，处于正常流程中。

浮动该框

要浮动该框，请将 float 和 margin-right 属性添加到 .box 规则中

css
.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
}

现在如果你保存并刷新，你会看到类似于以下内容

让我们思考一下浮动的工作原理。设置了浮动的元素（在本例中为 <div> 元素）将从文档的正常布局流程中移除，并粘贴到其父容器的左侧（在本例中为 <body>）。在正常布局流程中，在浮动元素下方显示的任何内容现在将环绕它，而不是填充到浮动元素右侧的空间，直到浮动元素的顶部。在那里它会停止。

将内容浮动到右侧具有完全相同的效果，但相反：浮动元素将粘贴到右侧，内容将环绕到左侧。尝试将浮动值更改为 right 并将 margin-right 替换为 margin-left 在最后一个规则集中查看结果。

可视化浮动

虽然我们可以向浮动添加边距以将文本推开，但我们不能向文本添加边距以将其从浮动中移开。这是因为浮动元素被移除出正常流程，并且后续项目的框实际上在浮动后面运行。你可以通过对你的示例进行一些更改来看到这一点。

将 special 类添加到第一个文本段落中，该段落紧随浮动框之后，然后在你的 CSS 中添加以下规则。这些将使我们的后续段落具有背景颜色。

css
.special {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
}

为了使效果更容易看到，将浮动上的 margin-right 更改为 margin，以便在浮动周围获得空间。你将能够看到段落的背景在浮动框下方运行，如以下示例所示。

我们后续元素的 行框 已被缩短，因此文本环绕浮动，但由于浮动从正常流程中移除，因此段落周围的框仍然保持全宽。

清除浮动

我们已经看到，浮动从正常流程中移除，并且其他元素会与其一起显示。如果我们想阻止后续元素向上移动，我们需要对其进行清除；这是使用 clear 属性实现的。

在前面示例中的 HTML 中，将 cleared 类添加到浮动项下方的第二个段落。然后将以下内容添加到你的 CSS 中

css
.cleared {
  clear: left;
}

你应该看到第二个段落现在清除了浮动元素，不再与其一起向上移动。clear 属性接受以下值

  • left：清除浮动到左侧的项目。
  • right：清除浮动到右侧的项目。
  • both：清除任何浮动项目，无论左侧还是右侧。

清除围绕浮动的盒子

你现在知道如何清除浮动元素后面的内容，但让我们看看如果你有一个高浮动和一个短段落，以及一个包裹着两个元素的框会发生什么。

问题

更改你的文档，以便第一个段落和浮动框一起用一个 <div> 包裹，该 <div> 具有 wrapper 类。

html
<div class="wrapper">
  <div class="box">Float1</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</div>

在你的 CSS 中，为 .wrapper 类添加以下规则，然后重新加载页面

css
.wrapper {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
}

此外，请移除原始的 .cleared 类

css
.cleared {
  clear: left;
}

你会看到，就像我们在段落上放置背景颜色时一样，背景颜色在浮动后面运行。

再一次，这是因为浮动已被移除出正常流程。你可能希望通过将浮动框和环绕浮动的第一个段落的文本一起包裹起来，后续内容将被清除框。但事实并非如此，如上所示。为了解决这个问题，标准方法是使用 块级格式化上下文 (BFC) 创建 display 属性。

display: flow-root

要解决这个问题，请使用 display 属性的 flow-root 值。它只存在是为了在不使用黑客的情况下创建 BFC - 当你使用它时，不会有任何意外的后果。

css
.wrapper {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
  display: flow-root;
}

测试您的技能！

你已经到达了本文的结尾，但你还能记住最重要的信息吗？在你继续之前，你可以找到一些进一步的测试来验证你是否保留了这些信息 - 请参阅 测试你的技能：浮动。

总结

你现在已经了解了现代 Web 开发中关于浮动的所有内容。请参阅关于 遗留布局方法 的文章，以了解它们是如何被使用的，这可能对你处理旧项目时有所帮助。