CSS：浏览器窗口缩小时，浮动元素换行问题

一、问题描述

1、浏览器默认缩放80%以上状态下的样式

自定义浏览器缩放80%以下时的样式，
可以看到明显错位了

查看代码html

        <div class="footer">
            <div class="footer-top">
                <div class="f-t-box">
                    <div class="f-t-content">
                        <img src="../img/foot1.png" alt="">
                        <span>7天无理由退货</span>
                    </div>
                    <div class="f-t-content">
                        <img src="../img/foot1.png" alt="">
                        <span>7天无理由退货</span>
                    </div>
                    <div class="f-t-content">
                        <img src="../img/foot1.png" alt="">
                        <span>7天无理由退货</span>
                    </div>
                    <div class="f-t-content f-t-content-n-border">
                        <img src="../img/foot1.png" alt="">
                        <span>7天无理由退货</span>
                    </div>
                </div>
            </div>
        </div>

查看CSS代码

.footer{
    height: 200px;
    /* background-color: tomato; */
}
.footer .footer-top{
    height: 113px;
    /* background-color: aliceblue; */
    overflow: hidden;
    border-top: 1px solid #ccc;
}
.footer .footer-top .f-t-box{
    width: 1120px;
    height: 53px;
    /* background-color: rgb(30, 160, 160); */
    margin: 0 auto;
    margin-top: 30px;
}
.footer .footer-top .f-t-box .f-t-content{
    width: 279px;
    height: 100%;
    /* background-color: chocolate; */
    /* background-color: #eee; */
    float: left;
    border-right:1px solid #ccc;
    text-align: center;
}
.footer .footer-top .f-t-box .f-t-content img{
    vertical-align: middle;
}
.footer .footer-top .f-t-box .f-t-content span{
    vertical-align: middle;
    margin-left: 10px;
}
.footer .footer-top .f-t-box .f-t-content-n-border{
    width: 280px;
    border: none;
}

二、解决方案

在其父盒子、祖父盒子下都加上overflow:hidden

三、修改后的css代码

.footer{
    height: 200px;
    /* background-color: tomato; */
}
.footer .footer-top{
    height: 113px;
    /* background-color: aliceblue; */
    overflow: hidden;
    border-top: 1px solid #ccc;
}
.footer .footer-top .f-t-box{
    width: 1125px;
    height: 53px;
    /* background-color: rgb(30, 160, 160); */
    margin: 0 auto;
    margin-top: 30px;
    overflow: hidden;
}
.footer .footer-top .f-t-box .f-t-content{
    width: 279px;
    height: 100%;
    /* background-color: chocolate; */
    /* background-color: #eee; */
    float: left;
    border-right:1px solid #ccc;
    text-align: center;
    overflow: hidden;
}
.footer .footer-top .f-t-box .f-t-content img{
    vertical-align: middle;
}
.footer .footer-top .f-t-box .f-t-content span{
    vertical-align: middle;
    margin-left: 10px;
}
.footer .footer-top .f-t-box .f-t-content-n-border{
    /* width: 280px;
    border: none; */
    width: 279px;
    /* height: 100%; */
    border: none;
    float: right;
}

缩放到最最最小值25%以下的时候才会换行，效果已经不错了。

如果有更好的解决办法，欢迎大家评论区给我留言哦。