请问大家为什么我的盒子不会浮动啊

 <div class="more-bd">
                <div class="info">
                    <div class="left">123</div>
                    <div class="right">123</div>
                </div>
                <div class="in">
                    <div class="left">123</div>
                    <div class="right">123</div>
                </div>
                <div class="into">
                    <div class="left">123</div>
                    <div class="right">123</div>
                </div>
                <div class="inter">
                    <div class="left">123</div>
                    <div class="right">123</div>
                </div>
            </div>

.more-bd .info{
    float: left;
}
.more-bd .in{
    float: left;
}
.more-bd .into{
    float: left;
}
.more-bd .inter{
    float: left;
}
.left .right{
    float: left;
}

我想要的效果是这样

但我做不出这种效果或许可以请问一下应该怎么做吗可以贴一下具体代码吗因为我是初学者可能知识体系了解不是很多

.more-bd .info{
display:flex
}

看看display:flex

给最外层的父元素，即more-bd，设置overflow:hidden;

建议使用flex布局

```css

.more-bd{
display: flex;
flex-wrap: wrap;
}

```

.more-bd{
display:flex;
flex-wrap:wrap;
justify-content: space-around;
align-items:center;
}