CSS 布局 (三) 浮动、定位、多列布局

6、浮动

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

6.1 浮动的背景

引入float属性是为了允许web开发人员实现包含图像在文本列内浮动的布局，文本在其左侧或右侧环绕。就像你在报纸版面上看到的那样。

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

浮动通常用于创建整个网站布局，其中包含多个浮动的信息列，因此它们彼此相邻(默认的行为是列以相同的顺序排列在另一个列的下面，因为它们出现在源中)。有更新、更好的布局技术可用。以这种方式使用浮点数应该被视为一种遗留技术。

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

6.2 float的例子

让我们来探索浮点数的使用。我们将从一个示例开始，该示例涉及在元素周围浮动文本块。您可以在计算机上创建一个新的index.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中(使用