浮动的背景

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

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

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

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

浮动示例

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

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

html

Float example

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.

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.

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.

现在将以下 CSS 应用于你的 HTML（使用