css : 使用浮动实现左右各放一个元素时很容易犯的错误

Posted 2021-02-11 亦虚

比如说，有一个div，我想在左侧和右侧各方一个元素。

如果不想用flex，那就只能用浮动了。

...
<div class="up clearfix">
       <h6>用户添加</h6>
       <div class="float right">
              <Button >新增</Button>
       </div>       
</div>
...

咋一看并没有问题，对不对？

但是这样不行：想挂在右侧的那个元素会被挤下去。

只要把浮动元素放在非浮动元素前面就行了。

...
                <div class="up clearfix">                    
                    <div class="float right">
                        <Button >新增</Button>
                    </div>
                    <h6>用户添加</h6>
                </div>
...

就是这样。