关于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.

上一篇:文本换行word-wrap、word-break与white-space


下一篇:html5+css3中的background: -moz-linear-gradient 用法 (转载)