会，浮动元素会覆盖标准流中的块级元素，因其脱离文档流后视觉层级更高，导致未浮动的div、p等被遮挡，而z-index对纯浮动元素无效。
浮动元素会覆盖标准流中的块级元素吗
会，而且这是最常见、最容易踩坑的重叠现象。浮动元素脱离文档流后，视觉层级比普通块级元素高半个级别，会直接盖在后面未浮动的 div、p、section 等上面。
- 典型表现：左边一个
float: left的导航栏，右边一个普通div内容区，结果内容区“跑上去”被导航栏遮住了一部分 - 根本原因：后面那个
div仍按原位置渲染（即它以为浮动元素还占位），而浮动元素已“浮”到上层，造成视觉覆盖 - 注意：
z-index对纯浮动元素无效——哪怕加了position: relative，若没触发层叠上下文，依然不生效
浮动元素会不会覆盖图片或表单控件
不会。图片（img）、输入框（input）、按钮（button）、下拉框（select）等，都属于“替换元素”，浏览器默认将它们视作内联内容处理，与浮动文字环绕逻辑一致。
- 浮动的
div可能盖住旁边的p文字，但同一位置放个img，文字会绕开它，图片本身也不会被遮挡 - 这个行为不是靠
z-index实现的，而是渲染引擎对替换元素的特殊保护机制 - 但一旦给图片加了
position: absolute或transform，它就脱离了该保护逻辑，可能被覆盖
为什么 overflow: hidden 能“清除”浮动却不算最佳解法
因为它靠触发 BFC 强制父容器包含浮动子项，但副作用明显：溢出内容会被裁剪，且可能意外触发滚动条（尤其在响应式场景下）。
- 更现代的做法是用
display: flow-root——同样触发 BFC，但无裁剪、无滚动风险，兼容性已覆盖 Chrome 64+/Firefox 59+/Safari 15.4+ - 老项目可包裹一层
div并设display: flow-root，比全局改overflow更精准 - 千万别用
clear: both加空标签（如<div style="clear:both"></div>）——语义污染、维护成本高，纯属历史包袱
想精确控制浮动元素的层叠顺序怎么办
放弃只用 float。浮动本就不为层叠设计，硬凑 z-index 很容易失效。
立即学习“前端免费学习笔记（深入）”；
- 正确路径：把需要分层的元素转为定位布局，例如
position: relative+z-index，再配合float做基础流向（仅当真需图文环绕时保留 float） - 示例：头像左浮动 + 文字环绕，同时让操作按钮浮在头像右上角——按钮应设
position: absolute; top: 0; right: 0; z-index: 2，而非依赖 float 排序 - 响应式下尤其要注意：浮动区域宽度不足时，
float: left元素可能换行错位，导致层叠关系彻底乱掉；建议用min-width或媒体查询兜底
