定位会完全压住标准流盒子内容及浮动的最初目的是文字环绕

最新推荐文章于 2022-12-01 13:21:33 发布

WangZhang_521

最新推荐文章于 2022-12-01 13:21:33 发布

阅读量359

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/WangZhang_521/article/details/122278816

版权

CSS 专栏收录该内容

85 篇文章 1 订阅

订阅专栏

定位会完全压住标准流盒子内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位会完全压住标准流盒子内容</title>
    <style>
        .box {
            /* 浮动的元素会压住下面标准流的盒子，不会压住下面标准流的文字 */
            /* float: left; */
            /* 绝对定位或者固定定位会压住下面标准流所有的内容 */
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p>阁下何不同风起，扶摇直上九万里</p>
</body>

</html>

效果展示

在这里插入图片描述

浮动的最初目的是文字环绕

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动产生的最初目的是文字环绕</title>
    <style>
        img {
            float: left;
        }
    </style>
</head>

<body>
    1993年，在古装片《455》中扮演一个武功超群的渔民***********************************************************************************************************************************************************************************在片中塑造了一个风流不羁的江湖浪子形象<img src="dj.png">***************************************************************************
</body>

</html>

效果展示

在这里插入图片描述