如何让float:right的div保留在nav容器内并实现预期布局效果？

问题现象 #

嵌套在<nav>标签内、设置了float: right的<div>元素实际渲染时，视觉效果如同脱离了<nav>的容器范围，需要在保留右浮动效果的前提下修复该异常。

复现代码 #

HTML 结构 #

<nav>
    <div style="float: right;">
        <input type="number" value="1">
        <input type="submit">
    </div>
</nav>

CSS 样式 #

* {
    margin: 0;
    padding: 4px;
}
nav {
    background-color: #e0e0e0;
    padding-inline: 12.5%;
}

问题原因 #

设置了float属性的元素会脱离普通文档流，没有触发BFC（块级格式化上下文）的父元素计算自身高度时，不会将浮动子元素的高度纳入计算范围，最终父元素高度塌陷，视觉上就像内部的浮动元素跑出了容器边界。

可行修复方案 #

以下两种方案都不会破坏原有div的右浮动效果，可根据业务场景选择：

• 方案1：给父元素<nav>添加overflow: auto属性，触发BFC让父元素正确识别浮动子元素的高度，修改后的nav样式如下：

nav {
    background-color: #e0e0e0;
    padding-inline: 12.5%;
    overflow: auto;
}

该方案代码量最少，只要父容器不需要展示超出自身边界的内容（如悬浮下拉、溢出提示）就可以优先使用。

• 方案2：使用clearfix伪元素清除浮动，适合担心overflow属性意外裁剪内容的场景，给nav追加如下样式即可：

nav::after {
    content: "";
    display: block;
    clear: both;
}

这是业界通用的清除浮动方案，不会影响父元素的溢出表现，适配场景更广。

修复后<nav>的灰色背景会完整包裹内部的表单控件，布局表现符合预期。

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