如何为容器内的hr设置margin-top并避免与浮动元素重叠？

我有一个名为containerquarter的div，内部包含三个左浮动div。我希望在浮动div下方、containerquarter内部添加一条水平线（hr），因此为hr设置了clear: left属性。但给hr添加margin-top后，外边距和浮动元素发生重叠，且不是外边距折叠问题，请问该如何修改代码？

CSS代码 #

* {
    margin: 0;                          
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}
.left {
    float: left;
}
.clrleft {
    clear: left;
}
.containerquarter {
    width: 1200px;
    margin: auto;
    overflow: hidden;
}
.settings {
    width: 260px;
    margin-left: 20px;
}
.settings select {
    width: 260px;
    height: 60px;
    margin: 10px 0px 0px 0px;
    padding: 0px 10px;
    border: 1px solid grey;
    font-size: 18px;
    appearance: none;
}

HTML代码 #

<!-- Footer -->
<footer>
    <div class="containerquarter">
        <div>
            <div class="left settings">
                <form>
                    <select id="lang">
                        <option value="ger">German</option>
                        <option value="en">English</option>
                    </select>
                    <select id="cur">
                        <option value="eur">Euro</option>
                        <option value="dol">Dollar</option>
                    </select>
                </form>
            </div>

            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
        </div>
        
        <hr class="clrleft">
        
    </div>
</footer>

问题示意图 #

出现这个问题的核心原因是浮动元素脱离了正常文档流，导致hr的margin-top是相对于父容器顶部计算，而非浮动元素的底部。以下是几种可行的解决方法：

方法一：让浮动元素的容器包裹浮动元素，用容器的margin-bottom设置间距 #

给包裹浮动div的内层div添加类名（比如float-wrapper），通过触发BFC让容器包裹住浮动元素，再用容器的margin-bottom控制和hr的间距：

.float-wrapper {
    overflow: hidden; /* 触发BFC，包裹浮动元素 */
    margin-bottom: 20px; /* 设置你需要的间距大小 */
}

修改HTML，给内层div添加类：

<div class="float-wrapper">
    <div class="left settings">
        <!-- 表单内容保持不变 -->
    </div>
    <div class="left"></div>
    <div class="left"></div>
    <div class="left"></div>
</div>

方法二：给hr使用padding-top代替margin-top #

margin-top因浮动元素脱离流失效，换成padding-top可直接在hr上方留出空间，同时保留clear: left：

.clrleft {
    clear: left;
    padding-top: 20px; /* 设置间距 */
    margin-top: 0; /* 清除默认margin避免干扰 */
}

方法三：用伪元素清除浮动并添加间距 #

如果不想额外添加容器，可给浮动元素的容器添加伪元素，同时实现清除浮动和设置间距的效果：

.float-wrapper::after {
    content: "";
    display: block;
    clear: both;
    margin-bottom: 20px; /* 设置间距 */
}

同样给内层div添加float-wrapper类，此时可去掉hr的clrleft类中的clear: left（伪元素已完成清除浮动），保留也不会产生冲突。

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