首页 > position:absolute和float 的脱离标准文档流一样么?或者说float有没有脱离

position:absolute和float 的脱离标准文档流一样么?或者说float有没有脱离

position:absolute是会脱离文档流的,但是float呢?

float之后还是会跟随父级,这是不是和position:absolute到body或者html的脱离不是完全一样,
再或者说既然会跟随父级,那是不是就没有脱离?


两者都会使元素脱离文档流, 但是,与absolute不同的是:
float 的元素还会在文档流上占据一个位置
看一个简单的实例你应该更容易理解:
DEMO:http://codepen.io/CodingMonkeyzh/pen/OVxGKL

从上面的效果中可以看出:

  1. 文字会围绕float的元素,所以float的元素在文档流还是占有有一席之位的。
  2. 文字被absolute的元素遮挡了,说明absolute的元素已经完全脱离文档流,文字可以无视它的存在。

position:absolutefloat都是使元素脱离文档流。

position:absolute的元素是根据最近的非static的父元素定位,如果没有,则根据最初的包含块定义(一般是body),看MDN上的示例:https://developer.mozilla.org/samples/cssref/css-positioning.html

关于float,也会脱离文档流,会被放置在其容器的左边或右边。

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

看MDN上的示例:https://developer.mozilla.org/samples/cssref/float.html


float 半脱离
导致了文字环绕效果

【热门文章】
【热门文章】