要求:

HTML基础知识(学习入门 HTML)，和CSS的工作理念(学习 入门 CSS)。

摘要:

学习如何创建浮动特性,比如删除帽、浮动图像，和多个列在网页布局。

背景知识

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

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

现在，浮动通常用来创建整个网站布局，其中包括浮动的多列信息，因此它们彼此并排放置(默认行为是列彼此之间的排列顺序与它们在源中显示的顺序相同)。虽然有更新的更好的布局技术可用，但我们将在本模块的后面探讨，浮动仍然是最受喜欢的老物，因为它们可以支持到 Internet Explorer 4。

简单的例子

让我们来探讨如何使用浮动。我们将从一个非常简单的例子开始，包括在图像周围浮动一个文本块。你可以跟随在你的电脑上创建新的index.html文件，以填充它 simple HTML template, 以下代码插入它在适当的地方。底部的部分你可以看到一个生活最后的代码应该是什么样子的例子。

首先,我们将开始与一些简单的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 (using a