在本文中你将开始了解浮动与清除——现代网页设计员必备的两个工具。它们的用途很多，你可以利用它们来使文本环绕在图像周围，或者甚至用来创建多列布局。

本文结构如下：

1. 浮动与清除为何而生？
2. 一些乏味的理论
3. 浮动是如何工作的？
4. 细节点
5. 多个浮动元素
6. 浮动元素的边距
7. 清除
8. 浮动元素的包含
9. 收缩包围
10. 浮动元素的居中
11. 漏洞!
12. 总结

如果往一本标准的杂志里面看去，你会看到文字环绕在文章插图周围。CSS中的float属性就是为了在网页上实现这种布局样式而发明的。浮动一张图片——或者浮动任何其它页面元素——就是将其推到一侧，使文本显示在另一侧。清除某个浮动元素就是在必要时将其下压，以防止它紧挨着浮动元素显示。

尽管任何页面元素都可设置为浮动，涉及人员普遍都是用它来达到多列布局的效果，以免滥用表格标记。

一些乏味的理论

为了说明浮动是如何起作用的，你需要仔细研究并观察web浏览器是如何渲染HTML/CSS文件的。别担心，我会尽量简短一些。

每个可见的HTML元素都会生成一个用于渲染的盒模型。当你在电脑屏幕或移动电话上浏览该文件的时候，这些盒模型就会在屏幕上渲染出来。当你打印该文件的时候，这些盒模型就会在纸上渲染出来。当你使用屏幕阅读器的时候，这些盒模型的内容就会以听觉的方式渲染出来，就像语音一样。

就像HTML中有块级和内联元素一样，CSS中也有块级和内联盒模型。从定义上讲，块级元素生成块状盒模型，而内联元素生成内联盒模型。除了由页面 元素生成的盒模型之外，还有其它一些生成的盒模型，例如，为文件的文本内容而生成的盒模型。块状盒模型通常是按照元素在标记中的出现顺序从上到下排列的。 如果不采用CSS的话，区块元素是不能并排显示的。内联盒模型是水平排列的。direction属性决定了它们是从左到右还是从右到左排列（如果不特别指定的话，默认是从左到右排列）。

下面这种现象被称为文件流：内联盒模型在其上层块状盒模型中横向流动，而块状盒模型纵向流动。盒模型按照元素在HTML标记中的顺序出现。

看看下面这个简单的HTML文档（我只给出body元素之内的部分）：

以下为引用的内容：
<p>This is a very simple document.</p>
<p>It consists of <em>two</em> paragraphs.</p>

图1显示了该文件的屏幕截图，其上的装饰层显示了由p元素生成的两个块状盒模型以及由em元素生成的内联盒模型。

#FormatImgID_0#

图1：由p元素生成的块状盒模型，以及由em元素生成的内联盒模型之演示。

所有在输出设备上排成一“线”的内联盒模型都被装在想象中的长方形里，这种长方形叫做线框。线框总是从上到下排列的，彼此之间没有间距，如图2所示：

#FormatImgID_1#

图2：每个渲染行都被装在一个单独的线框中。‘