让上下两个＜div＞不要重叠 下面＜div＞加上style=“clear:both；“清除浮动

<div> <span style="float: left;"></span> <span style="float: right;"></span> </div>htm2pdf转化后和table重叠

``` <div style="width: 110%;height: 220%;background-color: white;float: left;margin-top: 40px;margin-left: -660px;border-radius: 10px"> <div style="width: 5px;height: 25px;background-color: #1f78ff;margin-top: 22px;margin-left: 10px;border-radius: 10px;float: left"> </div> <div style="float: left;margin-top: 20px;font-size: 20px;font-weight: bold;width: 40%;"> 今日有效单量：{{ userinfo.today_order || '0' }}单 </div> <div style="float: right;font-size: 14px;color: gray;padding-top: 20px;padding-right: 20px">更新时间：{{ userinfo.nowtime }} <button @click="showdrawer" type="primary" style="color: rgb(64,158,255);background-color: white;border: none">数据表格 ></button> </div> <div style="clear: both"></div> <div style="float: left;margin-left: 8px;margin-top: 10px"> 日期A：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalBa }}</span>单 日期B：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalAa }}</span>单 升幅： <span style="font-weight: bold">{{ this.totalBa - this.totalAa }}</span>单</div> <div style="clear: both"></div> <div style="float: left;margin-left: 8px;padding-top: 20px"> 对比日期A: </div> <div style="clear: both"></div> <div style="float: left;margin-left: 106px;margin-top: -26px"> <el-date-picker value-format="yyyy-MM-dd" style="width: 140px;" v-model="timeA" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="clear: both"></div> <div style="float: left;margin-left: 260px;margin-top: -32px;position: relative"> 对比日期B: </div> <div style="clear: both"></div> <div style="float: left;margin-left: 360px;margin-top: -36px;position: relative"> <el-date-picker value-format="yyyy-MM-dd" style="width: 150px;" v-model="timeB" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="clear: both"></div> <div style="float: right;margin-top: -36px;margin-right: 440px;position: relative"> <el-select style="width: 120px;position: relative" v-model="current_time" placeholder="当前对比" @change="getOrderChart"> <el-option v-for="item in option_time" :label=item.label :value="item.value"> </el-option> </el-select> </div> <div style="clear: both"></div> </div>```窗口缩小后里面位置发生错乱怎么解决

``` <div style="width: 110%;height: 220%;background-color: white;float: left;margin-top: 40px;margin-left: -660px;border-radius: 10px"> <div style="width: 5px;height: 25px;background-color: #1f78ff;margin-top: 22px;margin-left: 10px;border-radius: 10px;float: left"> </div> <div style="float: left;margin-top: 20px;font-size: 20px;font-weight: bold;width: 40%;"> 今日有效单量：{{ userinfo.today_order || '0' }}单 </div> <div style=" float: right;font-size: 14px;color: gray;padding-top: 20px;padding-right: 20px">更新时间：{{ userinfo.nowtime }} <button @click="showdrawer" type="primary" style="color: rgb(64,158,255);background-color: white;border: none">数据表格 ></button> </div> <div style="clear: both"></div> <div style="float: left;padding-top: 10px;padding-left: 10px;"> 日期A：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalBa }}</span>单 日期B：<span style="color: rgb(64,158,255);font-weight: bold">{{ this.totalAa }}</span>单 升幅： <span style="font-weight: bold">{{ this.totalBa - this.totalAa }}</span>单 </div> <div style="clear: both"></div> <div style="float: left;padding-left: 8px;padding-top: 20px"> 对比日期A: </div> <div style="clear: both"></div> <div style="float: left;margin-left: 106px;margin-top: -26px"> <el-date-picker value-format="yyyy-MM-dd" style="width: 140px;" v-model="timeA" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="clear: both"></div> <div style="float: left;padding-left: 260px;margin-top: -32px;"> 对比日期B: </div> <div style="clear: both"></div> <div style="float: left;padding-left: 360px;margin-top: -36px;"> <el-date-picker value-format="yyyy-MM-dd" style="width: 150px;" v-model="timeB" type="date" @change="getOrderChart" placeholder="选择日期"> </el-date-picker> </div> <div style="float: right;margin-top: -36px;margin-right: 350px;"> <el-select style="width: 50%;" v-model="current_time" placeholder="当前对比" @change="getOrderChart"> <el-option v-for="item in option_time" :label=item.label :value="item.value "> </el-option> </el-select> </div> <div style="clear: both"></div> </div>```窗口缩小里面的今日有效单量：0单日期A：0单 日期B：0单 升幅： 0单 2025-03-16 对比日期B: 2025-03-17 当前对比 位置发生错乱看不到了，要求是不要新代码在我的代码基础上修改，达到窗口缩小后依然全可以看到

<div> <table> <tr> <td>温度传感器:</td> <td>{{ temperature }}</td> </tr> <tr> <td>湿度传感器:</td> <td>{{ humidity }}</td> </tr> <tr> <td>防爆开关:</td> <td>{{ explosion_status }}</td> </tr> </table> <i-button type="primary" size="large" @click="refreshData">刷新数据</i-button> </div>如何让这部分代码做出的网页效果展现在网页的最右边