文档流和文本流的区别

时间 2019-11-12

标签文档文本区别繁體版

原文原文链接

1.文档流是指html文档加载解析时从上到下，从左向右，但相对于盒子模型来讲，浮动后脱离文档流，可是没有脱离文本流。html

1.1代码ide

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test01{
            width: 100px;height: 100px;
            border:1px solid red;
            float: left;
        }
    </style>
    
</head>
<body>
    <div class="test01"></div>
   假若我是跋涉千里的夜行者，母亲必是那重重夜幕里一盏温柔的灯光，远远的为我亮着，轻唤我迟疑的脚步；假若我只是自怨自艾的蹩脚演员，母亲必是那热烈的掌声，呼唤我自信，鞭策我努力；假若我是条嬉戏的小游鱼儿，母亲必是那一汪碧绿的湖水，在包容我顽皮任任性的同时，也将个人快乐涟漪般一圈圈的扩散了去。
</body>
</html>

View Code

1.2效果图spa

2.文本流是指html文本的显示，是相对于文字段落来讲的。3d

tip：可是若是设置了绝对定位，元素既会脱离文本流也会脱离文档流。code

2.1代码htm

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test01{
            width: 100px;height: 100px;
            border:1px solid red;
            /*float: left;*/
            position: absolute;
        }
    </style>    
</head>
<body>
    <div class="test01"></div>
   假若我是跋涉千里的夜行者，母亲必是那重重夜幕里一盏温柔的灯光，远远的为我亮着，轻唤我迟疑的脚步；假若我只是自怨自艾的蹩脚演员，母亲必是那热烈的掌声，呼唤我自信，鞭策我努力；假若我是条嬉戏的小游鱼儿，母亲必是那一汪碧绿的湖水，在包容我顽皮任任性的同时，也将个人快乐涟漪般一圈圈的扩散了去。
</body>
</html>

View Code

2.2效果图blog