浮动的背景知识

最初，引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。

但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。之前的 fancy paragraph example 的课程展示了如何使用浮动创建一个有趣的 drop-cap（首字下沉）效果。

浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

在这一章中，我们仅就浮动这一命令本身的性能展开讲解。

简单的例子

让我们来探讨如何使用浮动。我们将从一个非常简单的例子开始，包括在图像周围浮动一个文本块。你可以在电脑上创建新的 index.html 文件，并以 简单的 HTML 模板 填充，在适当的地方插入以下代码。稍后你可以看到示例代码应该能呈现出的效果。

首先，我们写一些简单的 HTML——添加以下内容到 HTML 的内，删除之前里面的东西：

html

Simple 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 中（使用