【HTML+CSS学习笔记】浮动的特点

最新推荐文章于 2023-11-21 11:27:20 发布

NEUMANN2077

最新推荐文章于 2023-11-21 11:27:20 发布

阅读量140

点赞数

分类专栏： HTML+CSS学习笔记文章标签： css

本文链接：https://blog.csdn.net/m0_47746932/article/details/120498133

版权

HTML+CSS学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

浮动元素的特点：
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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>反映战斗情绪的散文诗，主要分为三个积极的主题：一是歌颂顽强勇敢的战斗精神，作者通过不同性格的反抗、战斗者形象的描写和塑造，表现了对军阀混战时期社会的反抗斗争精神。如《秋夜》通过对小粉红花、枣树和小青虫形象的描写，热情歌颂了反抗黑暗、坚持斗争，追求光明的反抗战斗精神，特别是突出歌颂了枣树不畏强敌、不受益惑、顽强勇敢的战斗精神。同广阔无边、冷酷凶残的夜空相比，枣树虽然显得势单力薄、孤独无助，而且身负内伤和外伤，但是它毫无惧色，始终“默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地映着许多蛊惑的眼睛’’。在枣树的攻击下，强大的夜空终于败北。
    </p>
</body>
</html>

效果如下：
请添加图片描述

2. 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离以后，元素的一些特点也会发生变化：

块元素：
- 脱离文档流之后，块元素不在独占页面的一行
- 脱离文档流以后，块元素的宽度和高度都被内容撑开

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box2{
            background-color: #bfa;
            float: left;
        }
        .box3{
            background-color: orange;
        }
    </style>
</head>
<body>

    <div class="box2">nihao</div>
    <div class="box3">nihao</div>
</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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float:left;
        }
    </style>
</head>
<body>
    <span class="box1">你好</span>
</body>
</html>