<div style="clear:both;"></div>

浮动浮动顾名思义就是浮动在了正常的流上，当内联元素遇到浮动元素时就会环绕着他，所以那个文字就卡在了浮动元素边界下方

被覆盖了

为什么设置栏目1向右浮动时则直接向右偏移，而栏目2（包括文字）占据原先栏目1的位置？

因为#div1{float:right} 会使栏目1脱离文档流并且向右移动;

这时由于浮动框(栏目1)不在文档的普通流中，所以文档的普通流中的块框(栏目2)表现得就像浮动框(栏目1)不存在一样。

因此栏目2（包括文字）会占据原先栏目1的位置.

_____________________________________________________________________________________________

为什么#div1{float:left} 时, 栏目2 的文字会环绕在栏目1下面.这个我也不清楚 = =

希望大佬们可以解惑!

________________________________________________________________________________________________

不好意思我也是小白,理解的不知道对不对.

主要参考了W3的CSS 浮动 章节.

按你写的#div1{float:left} 这个时候：

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。

因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

再理解一下float的含义：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。