深入讨论浮动的详细内容之前，首先要建立包含块的概念，这很重要。网页设计的浮动元素的包含块是其最近的块级祖先元素。因此，在以下标记中，浮动元素的包含块就是包含该浮动元素的段落元素：
<h1>Test</h1>
<P>
This is paragraph text, but you knew that. Within the content of this paragraph is an image that's been floated.
<img src="testy.gif- style="float: right;">
The containing block for the floated image is the paragraph.
</P>
注意：本章后面讨论定位时还会讨论包含块的概念。
此外，浮动元素会生成一个块级框，而不论这个元素本身是什么。因此，如果it一个链接浮动，即使该链接元素本身是行内元素，通常会生成一个行内框，但只要它是浮动的，就会生成一个块缉框。它会像块级元素一样摆放和表现（例如，就好像是一个div元素）。对浮动元素声明display: block也不是不可能，不过没有必要这么做。
网站建设里有一系列特定规则控制着浮动元素的摆放，所以在介绍浮动元素的行为之前，先来讨论这些规则。这些规则与控制外边距和宽度计算的规则很相似，开始看起来都一样。规则如下：
1、浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
这一点很显然。左浮动元素的左外边界向左最远只能到其包含块的左内边界，类似地，右浮动元素向右最远只能到达其包含块的右内边界，如图10-5所示。
2、浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。这条规则可以防止浮动元素彼此“覆盖”。如果一个元素向左浮动，而另一个元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置。不过，如果一个浮动元素的顶端在所有之前浮动图像（元素）的底端下面，它可以一直浮动到父元素的左内边界。图10-6显示了这种行为的一些例子。
这个规则的好处是，所有浮动内容都是可见的，因为设计人员不必担心一个浮动元素与另一个浮动元素重叠。这使得浮动很安全。使用定位时情况则完全不同，定位很容易导致元素相互覆盖。
3、左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
这条规则可以防止浮动元素相互重叠。假设有一个body，宽为500像素，它只有两个300像素宽的图像。第一个图像浮动到左边，第二个浮动到右边。这个规则可以防止第二个图像与第一个图像重叠100像素。实际上，它会要求第二个图像向下浮动，直到其顶端在左浮动图像的底端之下，如图10-7所示。
4、一个浮动元素的顶端不能比其父元素的内顶端更高。
如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。这个规则的前半部分很简单，可以防止浮动元素一直浮动到文档的顶端。正确的行为见图10-8所示。这个规则的第二部分则是对某些情况下的对齐进行微调一例如，如果有三个段落，其中中间的段落浮动。在这种情况下，浮动段落就会像有一个块级父元素一样浮动。这能防止浮动段落一直向上移动到三个段落共同的父元素的顶端。
5、浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
类似于规则4，规则5要求浮动元素不能一直浮动到其父元素的顶端。另外，网页设计的浮动元素的顶端也不可能比之前出现的浮动元素的顶端更高。图10-9所示就是这样一个例子，在这里可以看到，由于第二个浮动元素必须在第一个浮动元素的下面，第三个浮动元素的顶端则是第二个浮动元素的顶端，而不是第一个浮动元素的顶端。
6、如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
类似于规则4和规则5，这个规则进一步限制了元素的向上浮动，不允许元素浮动到包含该浮动元素之前内容的行的顶端之上。假设一个段落的正中间有一个浮动图像。这个图像顶端最高只能放在该图像所在行框的顶端。从图10-10中可以看到，这样图像就不会向上浮动太远。
图10-9：使浮动元素总在其之前浮动元素的下面
图10-10：使浮动元素在其上下文内
7、左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）
也就是说，浮动元素不能超出其包含元素的边界，除非它太宽，本身都无法放下，这就能防止出现以下情况，即多个浮动元素出现在一个水平行上，远远超出其包含块的边界，相反，如果浮动元素出现在另一个浮动元素的旁边，而因此可能导致超出包含块的话，实际上这个浮动元素会向下浮动到之前浮动元素下面的某一点，如图10-11所示（图中浮动元素从下一行开始，由此更清楚地说明这个规则在起作用）。这个规则最早在网站建设CSS2中出现，修正了CSS1在这方面的遗漏。
图10-11：如果没有足够的空间，浮动元素会被挤到一个新的“行”上
8、浮动元素必须尽可能高地放置。
当然，规则8要受前7条规则的限制。历史上，浏览器会把浮动元素的顶端与该图像标记所在行之后的行框的顶端对齐。不过，从规则8可以看出，浮动元素的顶端应当与其标记所在行框的顶端对齐，在此假设有足够的空间。这种理论上正确的行为如图10-12所示。
图10-12：满足其他约束条件的前提下，浮动尽可能高
警告：遗憾的是，由于对于“尽可能高”没有明确的定义（这可能表示“按常规尽可能高”，实际上对这种含义存在争议），所以不能指望被认为CSS1兼容的所有浏览器都有一致的行为。有些浏览器会遵循历史做法。将图像浮动到下一行，而另外一些浏览器会在空间足够的情况下将图像浮动到当前行。
9、左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会向右或向左浮动得越远。
同样的，网站建设中这条规则要受前几条规则的限制。这里同样存在规则8中的警告，不过不那么模糊。从图10-13可以看到，很容易确定元素已经向右或向左走得尽可能远。