在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-flow),但是他们脱离文档流之后的效果是否相同呢?
文档流与文本流
文本流
文本流,简单来说就是元素内部的一系列的字符的排列规则。
文档流
文档流,英文是normalflow,又翻译为常规流,标准流,正常流,普通流等。
文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。
元素在排版中的定位类型分为三种:
(1)文档流:块级格式化的块级盒子,行内格式化的行内盒子以及相对定位的块级盒子和行内盒子
(2)浮动(float)
(3)绝对定位(position:absolute/fixed)
此处参考W3C标准
脱离文档流与脱离文本流
根据官方文档所述,脱离文档流的方法有浮动(float)和绝对定位(poistion:absolute/fixed)。
那么我们接下来来看看他们的区别吧
使用浮动(float)
正常布局下:
给#nf元素开启浮动:
从上面的图中,我们可以看到#fl,#ap1,#ap2元素在计算布局位置的时候,无视了#nf元素的位置,从body元素的最左边开始布局,而他们内部的文本却并没有无视#nf元素的位置。
该情况说明,浮动会使元素脱离文档流,但是并不会脱离文本流,在文本流中还是占有位置的
使用绝对定位(position:absolute)
未使用绝对定位(position:absolute)之前,页面的代码和样式与浮动案例中的初始情况相同。
给#nf元素开启position:absolute:
该情况说明,绝对定位(position:absolute)会使元素脱离文档流和文本流。从上面的图中,我们可以看到#fl,#ap1,#ap2元素在计算布局位置的时候,无视了#nf元素的位置,从body元素的最左边开始布局,而他们内部的文本同样也无视#nf元素的位置。
使用绝对定位(position:fixed)
未使用绝对定位(position:fixed)之前,页面的代码和样式与浮动案例中的初始情况相同
给#nf元素开启position:fixed:
图片重复，建议替换或删除×
图片重复，建议替换或删除×
从上面的图中,我们可以看出#fl,#ap1,#ap2元素以及其内部文本都无视了#nf元素的位置。
该情况说明,绝对定位(position:fixed)会使元素脱离文档流和文本流。
总结
脱离文档流,指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。
浮动(float)与绝对定位(position:absolute/fixed)之间的区别就是
(1)浮动会使元素脱离文档流,但是不会脱离文本流,在于其他盒子的文本内容计算布局的时候,还是占位置的。
(2)绝对定位会使元素脱离文档流,同时也会脱离文本流,在于其他盒子的文本内容计算布局的时候,不占位置。