我对浮动效果的总结

浮动从何处开始:

如果一个浮动在两个块盒之间，它会将其上边界放置在前置块盒的下边界上，并且将其移动到左（或右边），直到达到外界容器元素的边界，通常是＜body>元素。水平浮动堆叠

如果居左的浮动被放置在其容器的左上脚，并且其后跟随一个同向的浮动，该浮动会被放置在容器右上脚，然后移动到左侧，边界延伸到第一个浮动的右侧时停止。

最后的一种行为让我们创建整行的floats，每个都被放置在前一个的右侧（或者左侧，如果使用{float:right;}).同样，当一行中没有足够的空间时，多出来的floats绕到下一行，非常像行内元素那样。这对于制作可点击的图像“简略图”非常方便，因为矩阵会自动调整到屏幕的尺寸，只是简单地在需要时进行回绕。

左上方的浮动在源代码中先出现，右下方的最后。他们都有一个小的边距以便看起来更好一些。试一下将浏览器的尺寸变小一些，观察浮动行被回绕以使用窗口尺寸。

上述浮动会回绕以使用任何屏幕的尺寸。注意其下段落（不可见）的文本同样也调整以使用浮动排列的变化。该段落实际上从第一个浮动开始的地方开始，但是只有在段落文本可见的情况下，该事实才不明显。截图中的段落具有边框盒背景以便显示实际的位置。

如果浮动被设置为“右侧”而不是“左侧”，其行为完全相同，

知识浮动从右开始，而不是从左开始，后续的浮动被添加到左侧行尾而不是右侧。两种情况，回绕都是一样的，除非float的Bugs导致差异。

用这样的方式思考，一个容器中的浮动首先被移到它能够到达的最上方的空间（在其定位的方向），然后按设置的浮动反向移动直到到达容器的边界，或者遇到另一个浮动。每个连续的浮动都是同样处理，直到其中一个浮动在另一个浮动的level中无法发现足够宽的空间。这样，它会被强制停止到另一个浮动的底部，然后向之前那样进行滑行。

警告！注意上面的浮动的高度不是一样的。当一个浮动被放置到第二行紧接第一行时，它视图滑行到边界，当遇到第一高的浮动时会被停住。当有大量不规则浮动时，这会造成很丑陋的情况。上面的浮动中包含一些比其他高一些的浮动。

缩小你的浏览器以不同的屏幕宽度来测试。

在追着一个大型的简略图矩阵时，必须注意确保所有的浮动具有同样的高度，或者页面可以轻易地被出轨的浮动重新组装。

本文中的所有例子都使用了特殊的处理以适应IE5._/win盒模式的缺点。由于边框和填充造成了必须特殊处理。

反向浮动:

以下开始讲述关于浮动的最晦涩、最难以理解的部分。

回顾一下跟随浮动后面的静态盒。这些盒只是忽略浮动，并且在前一个静态盒的后面排列显示。假设你给以下盒一个清除属性，

{clear:both;}。这是将被清除盒的顶部边距扩展，将其向下推直到清理浮动的底部。换句话说，该被清理的盒的顶部边距（无论它之前被设置成什么值），都会被浏览器增加到需要保证被清理盒位于浮动下回的长度。

这样的效果是，一个被清理的盒无法与前置浮动保持在同一个水平位置上。它必须出现在其下方。以下图例展示了效果。展示一个盒如何清理下方的一个浮动:

记住，浮动实际上并不是真正地被包含在一个块盒中，即使在源代码中是怎样嵌套的。请注意确认，浮动的屏幕开始点是由它所嵌套的位置决定的，之后它只是在容器盒上展开，就像绝对元素一项。只有包含行内元素的行盒（例如文本），才需要关注浮动在哪里被显示。制作一个看起来封装一个嵌套浮动的外容器的标准方法是在容器的最后放置一个完整“被清理”的元素:

由于div没有被浮动，容器必须识别它并封装它，并且由于顶部边距（由于“clear”属性由浏览器添加），该div将容器的底部边界拉到浮动框的底部。

的确，这是一个古怪的方法，但是标准就是这样说的。不过，W3C中有一个讨论关于添加一个容器自动封装一个浮动的规则。这样就于更加简单。

事实上，IE盒Opera7已经自动封装嵌套的浮动，与标准不一样。Opera6不是这样，因此看来Opera在跟随MS的非标准道路。

还可以使用{clear:left;}或{clear:right;}.这可以让一个元素清

除左侧浮动当不影响右侧浮动，或者相反。要使用这种控制你需要有相当的想像力。

通常来说，清除可以很好地完成，但是有时会引起不大不小的错误，这完全是由IE造成的。