核心提示：在本文中你将开始了解浮动与清除——现代网页设计员必备的两个工具。它们的用途很多，你可以利用它们来使文本环绕在图像周围，或者甚至用来创建多列布局。
在本文中你将开始了解浮动与清除——现代网页设计员必备的两个工具。它们的用途很多，你可以利用它们来使文本环绕在图像周围，或者甚至用来创建多列布局。
本文结构如下：
如果往一本标准的杂志里面看去，你会看到文字环绕在文章插图周围。CSS中的float属性就是为了在网页上实现这种布局样式而发明的。浮动一张图片——或者浮动任何其它页面元素——就是将其推到一侧，使文本显示在另一侧。清除某个浮动元素就是在必要时将其下压，以防止它紧挨着浮动元素显示。
尽管任何页面元素都可设置为浮动，涉及人员普遍都是用它来达到多列布局的效果，以免滥用表格标记。
为了说明浮动是如何起作用的，你需要仔细研究并观察web浏览器是如何渲染HTML/CSS文件的。别担心，我会尽量简短一些。
每个可见的HTML元素都会生成一个用于渲染的盒模型。当你在电脑屏幕或移动电话上浏览该文件的时候，这些盒模型就会在屏幕上渲染出来。当你打印该文件的时候，这些盒模型就会在纸上渲染出来。当你使用屏幕阅读器的时候，这些盒模型的内容就会以听觉的方式渲染出来，就像语音一样。
就像HTML中有块级和内联元素一样，CSS中也有块级和内联盒模型。从定义上讲，块级元素生成块状盒模型，而内联元素生成内联盒模型。除了由页面 元素生成的盒模型之外，还有其它一些生成的盒模型，例如，为文件的文本内容而生成的盒模型。块状盒模型通常是按照元素在标记中的出现顺序从上到下排列的。 如果不采用CSS的话，区块元素是不能并排显示的。内联盒模型是水平排列的。direction属性决定了它们是从左到右还是从右到左排列（如果不特别指定的话，默认是从左到右排列）。
下面这种现象被称为文件流：内联盒模型在其上层块状盒模型中横向流动，而块状盒模型纵向流动。盒模型按照元素在HTML标记中的顺序出现。
看看下面这个简单的HTML文档（我只给出body元素之内的部分）：
相关浮动及清除网页设计员必备的两个工具