html盒子里面嵌套三个盒子并设置floatleft后依然跳出

Question

如图，盒子里面嵌套三个盒子并设置float：left后跑到下面了是什么情况。

    <div class="box2 w">
        <div class="like-list"></div>
        <div class="best-sale"></div>
        <div class="login"></div>
    </div>

.box2 {
    height: 460px;
    background: pink;
    border-radius:10px;
}
.box2 .like-list {
    height: 100%;
    width: 390px;
    background: red;
    float: left;
    margin-right: 15px;
}
.box2 .best-sale {
    height: 100%;
    width: 390px;
    background: red;
    float: left;
    margin-right: 15px;
}
.box2 .login {
    height: 100%;
    width: 390px;
    float: left;
    background: red;
}

Answer 1

总宽度你设了460，子元素一个就390了，所以会换行