浮动的注意点

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>

运行效果

猜你喜欢