CSS:给子元素设置了浮动，页面缩放的时候，子元素往下掉

十八只兔2023-07-21 16:44

前言

给子元素设置了浮动，页面缩放的时候，子元素往下掉

html代码：

javascript 复制代码

<div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

css代码

css 复制代码

.child1{
    width: 600px;
    height: 200px;
    background-color: red;
    float:left

}

.child2{
    width: 600px;
    height: 200px;
    background-color: blue;
    float:left

}

结果：
但页面缩放的时候，第二个子元素会往下掉

解决

给子元素最外层的大盒子设置宽高即可解决，比如给父盒子设置宽度，其2宽度至少是2个子盒子的宽度之和

页面缩放后，蓝色的子盒子不会掉下去：