浮动的注意点

最新推荐文章于 2024-07-24 11:13:53 发布

爱吃火锅的小boy

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量160

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_42900834/article/details/124781039

版权

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{
             width: 900px;
             height: 300px;
             background-color: pink;
             margin: 0 auto;
        }

        /* 小盒子1(标准流，独占一行) */
        .damao{
             width: 200px;
             height: 200px;
             background-color: purple;
        }

        /* 小盒子2（第二个盒子浮动） */
        .ermao{
             float: left;
             width: 200px;
             height: 150px;
             background-color: red;
        }

        /* 小盒子3（第三个盒子没有浮动，跑到第二个盒子下面） */
        .sanmao{
            width: 300px;
            height: 240px;
            background-color: blue;
        }

    </style>

</head>

<body>
         <div class="box">
                <div class="damao">大毛</div>
                <div class="ermao">二毛</div>
                <div class="sanmao">三毛</div>
         </div>
</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>浮动的注意点</title>
    <style>
        /* 大盒子 */
        .box{
             width: 900px;
             height: 300px;
             background-color: pink;
             margin: 0 auto;
        }

        /* 小盒子1(标准流，独占一行) */
        .damao{
             float: left;
             width: 200px;
             height: 200px;
             background-color: purple;
        }

        /* 小盒子2（第二个盒子浮动） */
        .ermao{
             width: 200px;
             height: 150px;
             background-color: red;
        }

        /* 小盒子3（第三个盒子没有浮动，跑到第二个盒子下面） */
        .sanmao{
            float: left;
            width: 300px;
            height: 240px;
            background-color: blue;
        }

    </style>

</head>

<body>
         <div class="box">
                <div class="damao">大毛</div>
                <div class="ermao">二毛</div>
                <div class="sanmao">三毛</div>
         </div>
</body>

</html>

运行效果

爱吃火锅的小boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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, init
复制链接

扫一扫