1. 学习
  2. 核心学习模块
  3. CSS 布局
  4. 浮动

浮动

float 属性最初用于在文本块内浮动图像，后来成为网页上创建多列布局最常用的工具之一。随着 Flexbox 和 Grid 的出现，它现在已经回归其最初的用途，正如本文所解释的。

预备知识 使用 HTML 构造内容、CSS 样式基础、文本和字体样式基础，熟悉CSS 布局基本概念。
学习成果
  • 了解浮动的目的——用于在文本列中浮动图像，以及诸如首字下沉和浮动嵌入信息框等其他技术。
  • 了解浮动曾用于多列布局，但现在有了更好的工具，这种情况已不再适用。
  • 使用 float 属性创建浮动。
  • 使用 clear 和 display: flow-root 值清除浮动。

浮动的背景

引入 float 属性是为了让 Web 开发者能够实现一种布局，即图像浮动在文本列中，文本环绕其左侧或右侧。这就像报纸版面中常见的那种布局。

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

浮动曾常用于创建整个网站布局，其中包含多列信息浮动在一起（默认行为是列会按照它们在源代码中出现的顺序堆叠在彼此下方）。现在有更新、更好的布局技术可用。以这种方式使用浮动应被视为一种遗留技术。

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

浮动示例

让我们来探索浮动的使用。我们将从一个示例开始，其中涉及围绕一个元素浮动一个文本块。你可以通过在电脑上创建一个新的 index.html 文件，用一个 HTML 模板填充它，并将以下代码插入到适当的位置来跟着学习。在本节底部，你可以看到最终代码的实时示例。

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

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 "Helvetica",
    "Arial",
    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：清除所有浮动的项目，无论是左浮动还是右浮动。

清除浮动周围的盒子

现在你知道如何清除浮动元素后面的内容，但让我们看看如果你有一个高大的浮动元素和一个短小的段落，并且一个盒子包含了两个元素时会发生什么。

问题

修改您的文档，使第一个段落和浮动盒子共同用一个带有 wrapper 类的 <div> 包裹。

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;
}

你会看到，就像我们在段落上添加背景颜色的例子一样，背景颜色会运行在浮动元素的后面。

这再次是因为浮动元素已从正常流中取出。您可能认为，通过将浮动框和围绕浮动框的第一个段落的文本一起包裹起来，后续内容将清除该框。但事实并非如此。

display: flow-root

解决这个问题的方法是使用 display 属性的 flow-root 值。这个值只为解决这个特定问题而存在，无需使用任何技巧——使用它不会带来任何意外的后果。

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

总结

这就是您需要了解的关于浮动的所有内容。在下一篇文章中，我们将为您提供一些测试，您可以用来检查自己对所有这些信息的理解和掌握程度。

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题