关于CSS 浮动及清除：网页设计员必备的两个工具

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

本文结构如下：

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

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

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

一些乏味的理论

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

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

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