问题解析：float 属性的副作用
在传统的 css 布局中，float 属性常用于实现元素的左右浮动效果，例如将一个 div 元素浮动到其父容器的右侧。然而，float 属性有一个重要的副作用：它会将浮动元素从正常的文档流中移除。这意味着父容器将不再感知浮动元素的高度，从而可能导致父容器的高度塌陷。当父容器设置了背景色或边框时，这种塌陷会使得父容器的背景或边框无法包裹住浮动元素，造成视觉上的错位。
考虑以下 HTML 结构和 CSS 样式：
原始 HTML 结构：
原始 CSS 样式：
* {
margin: 0;
padding: 4px;
}
nav {
background-color: #e0e0e0;
padding-inline: 12.5%;
}在这个例子中，nav 元素被赋予了背景色和内边距，但由于其内部的 div 设置了 float: right;，nav 容器会塌陷，背景色无法覆盖 div 的高度区域，导致布局异常。
Flexbox 解决方案：将内部 div 转换为 Flex 容器
为了解决 float 带来的父容器塌陷问题，并实现元素的精确对齐，现代 CSS 布局推荐使用 Flexbox（弹性盒子）模型。Flexbox 提供了一种更高效、更直观的方式来对容器中的项目进行布局、对齐和分配空间，尤其适用于一维布局。
核心思想是：不再依赖 float，而是将需要内部元素对齐的容器本身设置为 Flex 容器，然后利用 Flexbox 的属性来控制其子元素的排布。
修改后的 HTML 结构（移除内联 float 样式）：
修改后的 CSS 样式： 我们将 nav 的背景色和内边距转移到其内部的 div 上，并使该 div 成为一个 Flex 容器，以管理其内部 input 元素的对齐。
* {
margin: 0;
padding: 4px;
}
/* 将 nav 的背景色和内边距转移到其内部的 div */
nav > div {
display: flex; /* 将 div 设为 Flex 容器 */
justify-content: 
