css使用float属性后被覆盖：原因详解及解决方法；(内附css浮动float详解)

如上图所示，点击中间的“批量移除”按钮没有反应，打开控制看可看到它的样式被下面的列表覆盖了。
排查原因发现： 按钮的初始位置为靠左，使用了style="float: right;"使其靠右显示。

1. css使用float属性后被覆盖的原因：

div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
如果我们把div2采用右浮动，会是如下效果：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
假如我们把div2、div3、div4都设置成左浮动，效果如下：

假如把div2、div3、div4都设置成右浮动，效果如下：

总结：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
更详细的解说参考：经验分享：CSS浮动(float,clear)通俗讲解

2. 解决方法

清除浮动可以理解为打破横向排列。
清除浮动的关键字是clear，官方定义如下：
语法：

   clear : none | left | right | both

   取值：

   none  :  默认值。允许两边都可以有浮动对象

   left   :  不允许左边有浮动对象

   right  :  不允许右边有浮动对象

   both  :  不允许有浮动对象

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

方法一：

<template>
   <el-button style="float: right; margin-top: 10px;" size="small" type="primary" @click="removeData">批量移除</el-button>
   <div style="clear:both"></div>
</template>

根据上述解说可知，按钮的样式必须浮动到右边，所以不能直接在按钮的样式上使用clear属性，但是要想打破横向排列，就需要让它占满一行，故可在其下面定义一个空的div样式，并定义style="clear:both"，强行把其下面的元素挤下去。

方法二：

<el-button style="float: right; margin-top: 10px;" size="small" type="primary" @click="removeData">批量移除</el-button>
<a-table :columns="basicsData.columns" :data-source="dataSource" :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnTitle:' ' }"
         :pagination="pagination" :row-key="(record) => getTableId(record)" :row-class-name="rowClassName"
         @change="changePagination" class="mon-table-content" style="clear:both">
</a-table>

还可以将style="clear:both"直接使用在其下面的table组件上，也可以使用style="clear:right"属性。

3. 结果