文档流、文字流-----浮动

最新推荐文章于 2023-10-21 16:06:09 发布

. . . . .

最新推荐文章于 2023-10-21 16:06:09 发布

阅读量759

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/84562673

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

文档流是相对于盒子模型讲的。

文本流是相对于文字段落讲的。

在这里插入图片描述

对于文字流参考代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #cccccc;
            float: left;
        }
        p {
            background: #cc0000;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <p>
        发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
        发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
        发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
        发了疯的骄傲了放假啊练腹肌奥拉夫骄傲了放假啊了司法局案例书法家阿里放假啊练腹肌奥拉夫骄傲了发了飞机案例附件奥拉夫建安费；案件案发；练腹肌奥拉夫骄傲了放假啊；发发了飞机阿拉；率阿里
    </p>
</body>
</html>

对于文字流效果如下：

在这里插入图片描述

对于文档流参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #cccccc;
            float: left;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background: #cc0000;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="box2">

    </div>
</body>
</html>

对于文档流效果如下：

在这里插入图片描述

. . . . .

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
文档流、文字流-----浮动

文档流是相对于盒子模型讲的。文本流是相对于文字段落讲的。对于文字流参考代码：&lt;!DOCTYPE html&gt;&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/ti
复制链接

扫一扫