注意：为了更清楚的看到效果，所有的float元素都设置了向左或向后的margin

float元素对块级元素的影响

块级在前，float在后

我是没有设置宽度的块级元素

我是 float:left 元素

我是设置了宽度的块级元素

我是 float:left 元素

我是没有设置宽度的块级元素

我是 float:right 元素

我是设置了宽度的块级元素

我是 float:right 元素

块级在后，float在前

我是 float:left 元素

我是没有设置宽度的块级元素

我是 float:left 元素

我是设置了宽度的块级元素

我是 float:right 元素

我是没有设置宽度的块级元素

我是 float:right 元素

我是设置了宽度的块级元素

float元素对inline元素的影响

inline在前，float在后

我是inline元素

我是 float:left 元素

我是inline元素，我的长度很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很

我是 float:left 元素

我是inline元素

我是 float:right 元素

inline在后，float在前

我是 float:left 元素

我是inline元素

我是 float:left 元素

我是 float:right 元素

我是inline元素

我是 float:right 元素

float元素对float元素的影响

父容器的宽度足够容纳所有子元素

我是前面 float:left 元素

我是后面 float:left 元素

我是前面 float:left 元素

我是后面 float:right 元素

我是前面 float:right 元素

我是后面 float:left 元素

父容器的宽度不够容纳所有子元素

我是前面 float:left 元素

我是后面 float:left 元素, 我的长度很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很

我是前面 float:left 元素

我是后面 float:right 元素, 我的长度很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很

我是前面 float:right 元素

大总结：

一、对块级元素的影响
  1. 块级元素在float元素的前面和后面的显示效果是不一样的;
  2. 块级元素在前，则float元素就会在块级元素之后另起一行来显示;
  3. 块级元素在后，则块级元素会占据float元素所在行，且被float元素覆盖;
     但是块级元素内的inline元素遇到float元素则会环绕其显示;
  4. 注意：上面的显示规则跟块级元素是否设置宽度无关;

二、对inline元素的影响
  1. inline元素不多说，inline元素会环绕float元素显示;
  2. 直接看示例了解细节

三、float元素对float元素的影响
  1. 父容器的宽度足够容纳所有子元素，则在一行显示
  2. 父容器的宽度不够容纳所有子元素，则后面元素会另起一行显示