如何将button放置在dashboard-detail-body右侧且不与下方div重叠

问题原因 #

使用float: right的元素会脱离普通文档流，父容器dashboard-detail-body和下方的dashboard-container不会计算浮动元素的高度，所以即使给浮动元素加margin-bottom也不会作用到下方的普通流元素上，就会出现重叠问题。

解决方案 #

这里提供两种可选实现方式：

方案1：清除浮动（适配现有结构，改动最小）

在浮动元素和下方dashboard-container之间插入清除浮动的占位元素即可让margin生效：

<div class="dashboard-detail-body">
    <div style="float: right; margin-right: 10px; margin-top: 15px; margin-bottom: 15px;">
        {{ui-5/button label="click me"}}
    </div>
    <!-- 新增清除浮动的空元素 -->
    <div style="clear: both;"></div>
    <div class="dashboard-container">
        <!-- 原有内容 -->
    </div>
</div>

方案2：改用Flex布局（更推荐，避免浮动带来的各种文档流问题）

直接给父容器设置flex纵向布局，按钮单独右对齐，所有元素都在正常文档流内，边距会自动生效：

<div class="dashboard-detail-body" style="display: flex; flex-direction: column;">
    <div style="align-self: flex-end; margin: 15px 10px;">
        {{ui-5/button label="click me"}}
    </div>
    <div class="dashboard-container">
        <!-- 原有内容 -->
    </div>
</div>

内容的提问来源于stack exchange，提问作者dina