为啥两个子元素没有预期的并排

当前代码，box2的两个子元素只能竖着如图排列，为啥没有并排，如果给box2加了宽，他们才能并排了

<html>
    <head>
        <style>
            div{
                width: 100px;
                height: 100px;

            }
            .box1{
                background-color: blue;
            }

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/223014022626134.png)

            .box2{
                float: left;
            }
            .box2-son{
                background-color: chartreuse;
                float: left;
            }
            .box2-dau{
                background-color: red;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2">
            <div class="box2-son"></div>
            <div class="box2-dau"></div>
        </div>
    </body>
</html>

因为div{width:100px;height:100px}你把所有div都设置100px。两个块并排是200px。box2放不下就换行了

<html>
    <head>
        <style>
            /* div{
                width: 100px;
                height: 100px;
            } */
            .box1{
                background-color: blue;
                width: 100px;
                height: 100px;
            }

            .box2{
                float: left;
            }
            .box2-son{
                background-color: chartreuse;
                float: left;
                width: 100px;
                height: 100px;
            }
            .box2-dau{
                background-color: red;
                float: left;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2">
            <div class="box2-son"></div>
            <div class="box2-dau"></div>
        </div>
    </body>
</html>

img

div {
width: 50%;
height: 100px;

    }

因为这个，你把宽度定死了