CSS Float

1.元素float，形象点说，就是一个元素漂浮起来了。
      假如说，网页的画板是一栋两层楼房的一楼，那么我们在这个画板上加入元素布局，这些元素就是普通的没有浮动的元素。然后，我们让其中一个元素浮动，那它就缓缓上浮，浮到了二楼，然后根据float的要求或left或right移动至边界。
      这样，它原先在一楼占的位置就会被让出来，它的父容器元素或之后的元素就会来填补这个空白，而我们看网页相当于坐着飞机在俯瞰这栋楼房，这样一来，在视觉效果上二楼的元素就会遮住一楼相同位置的元素。同时它的父容器也会因为它的浮动而在视觉层面上失去对它的包含（结构上仍然包含它）。
      但是，在这个比喻中，有一个规则是一定要了解的。虽然浮动元素浮到了二楼，但是在它之前就已经存在的一楼元素在二楼的投影位置必须空着（保证鸟瞰的时候能够看到一楼的它们），浮动元素不能去占用这些位置，也就是说，浮动元素只会影响在它之后出现的元素的位置。而在它之前出现的元素，浮动元素不仅不能影响它们的位置，甚至还会被它们影响自身位置。

      如果把坐标系的原点、x和y坐标定在一楼平面内，z坐标为楼房的高，浮动元素的行动轨迹大致可以描述为：首先沿z坐标做立体浮动至二楼，然后沿x坐标做平面浮动（left或right），最后，如果它的高位元素（y坐标正向）还有空位的话（高位元素也是浮动元素或行内元素），它还会沿y坐标正向做平面浮动。这里要注意一点，如果浮动元素沿y坐标浮动了，不管是left浮动还是right浮动，那它到达高位的起始位置都是最右边，即x在画布中的最大值。随后它将沿着x由大到小的方向继续浮动，直至被卡住。

Ps：IE6中，如果容器没有设置height属性，那么float元素会脱离该容器。一旦容器设置了height属性，哪怕只是1px，float元素仍将继续被这个容器包含——至少在视觉上是如此。

2.在浮动中有一个比较特殊的元素：<p>。首先p是一个块级元素，p中的文字被行框包含，所有的行框在p内。
      a).当p之前的元素浮动而p不浮动时，那么p中的行框会自动缩短并围绕这个浮动元素，而不会被这个浮动元素覆盖（我们可以理解为p是一个可以根据环境因素变形的块状元素）。想让p中的行框不围绕浮动元素，可以给p元素加上clear属性。
      b).p中不会存在div元素，即使你将div元素强制写在p元素中，文档编译之后div元素仍然会被释放出来