概述

在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-flow),但是他们脱离文档流之后的效果是否相同呢?

文档流与文本流

文本流

文本流,简单来说就是元素内部的一系列的字符的排列规则。

文档流

文档流,英文是normal flow,又翻译为常规流,标准流,正常流,普通流等。

文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。

元素在排版中的定位类型分为三种:

(1)文档流:块级格式化的块级盒子, 行内格式化的行内盒子以及相对定位的块级盒子和行内盒子

(2)浮动(float) (3)绝对定位(position:absolute/fixed)

此处参考W3C标准: www.w3.org/TR/2016/WD-…

脱离文档流与脱离文本流

根据官方文档所述,脱离文档流的方法有浮动(float)和绝对定位(poistion:absolute/fixed)。

那么我们接下来来看看他们的区别吧

使用浮动(float)

正常布局下:

 <div id="nf">
        In CSS, normal flow includes block formatting 
        of block-level boxes, inline formatting of 
        inline-level boxes, and relative and sticky 
        positioning of block-level and inline-level boxes.
 </div>
 <div id="fl">
        Normal Flow
 </div>
 <p id="ap1">Normal Flow</p>
 <p id="ap2">
        In the absolute positioning model, a box is 
        removed from the normal flow entirely (it has 
        no impact on later siblings) and assigned a 
        position with respect to a containing block.
 </p>

<style>
        #nf{
            background-color: gray;
            width:200px;
        }
        #fl{
            background-color: black;
            color:white;
        }
        #ap1{
            background-color: yellow;
        }
        #ap2{
            background-color: lightblue;
        }
</style>

给#nf元素开启浮动: