关于float样式

在认识float样式之前务必要认识position:absolute

position:absolute

功能是:当前节点脱离文档流,对于其兄弟节点(即同一父节点下的节点)已经感觉不到他的存在(即他的位置已经被其兄弟结点占用了,即使他里面还有内容也不给腾位置，他就只能漂浮着)。他可以漂浮在其父节点所覆盖的区域的任何地方的上方。

而float的功能与position:absolute的功能是类似的:

float样式有四种值:left, right, inherit, none.

none:即默认值,即不使用float样式;

inherit:继承父节点的float样式值;

left,right表示漂浮在左边或者右边。这两个值使float具有类似于poistion:absolute的功能，该元素也是漂浮在其父节点所覆盖的区域内。也是脱离了文档流

但有两点是不一样的

1、他不能漂浮在父节点所覆盖的区域的任何地方,只能是在他原来所能在的位置的左边或者右边;

2、虽然其他兄弟节点占了他的地方了，但只要他里面还有内容，其他兄弟节点还是要为他腾出位置给他使用(只要能够够他使用即可，其周边可让其兄弟继续使用)，不能越雷池半步。

3、基于第2点，如果其兄弟节点也设置了float为left或者right时，这时如果会出现在同一行上，但兄弟之间的内容又会覆盖到彼此，基于第2点原则,位于右侧的节点将被挤压至下一行。

4、有一个点是需要注意的,但其兄弟节点也均设置了float为left或者right时(即都脱离了文档流),这时其父节点中的子元素都脱离了文档流，所以其父节点的高度为0.