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

前言

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

• html代码：

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

• css代码

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

}

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

}

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

解决

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

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