浮动元素脱离文档流导致布局错乱，解决需让父容器感知高度并控制后续元素定位；清除浮动可用伪元素clearfix、BFC触发（如display: flow-root）或空标签；避免文字环绕可设clear:both或改用Flex/Grid；z-index对纯浮动无效，需配合position使用；现代布局应优先采用Flexbox或Grid。
浮动元素会脱离文档流，导致后续的块级元素“无视”它的存在，向上移动填补空白，造成布局错乱或文字环绕等覆盖问题。解决核心是让父容器“感知”到浮动子元素的高度，并控制后续元素的定位逻辑。
清除浮动：让父容器包含浮动子元素
浮动子元素不占据父容器的正常高度，父容器可能塌陷成高度为0。常用清除方法：
- 在父容器末尾添加空标签并设置 clear: both（如
），简单但增加无意义HTML - 给父容器触发BFC（块级格式化上下文），推荐方式：设置 overflow: hidden、overflow: auto 或 display: flow-root（现代标准，无副作用）
- 使用伪元素清除（clearfix）：
.clearfix::after { content: ""; display: table; clear: both; }
给父容器添加 class="clearfix"，语义清晰、复用性强
避免文字环绕：控制后续行内内容的流向
浮动常用于图文混排，但若后续段落文字紧贴浮动图右侧，可能被遮挡或阅读困难：
- 给文字所在块级元素（如
p、div）设置 clear: both，强制换行并从浮动元素下方开始渲染 - 用 margin 预留空间，例如浮动右图时，给文字容器加 margin-right: 200px 避免重叠
- 更现代的方式是改用 display: flex 或 display: grid 布局，天然规避浮动带来的流向干扰
浮动元素相互覆盖：z-index 无效时的应对
浮动元素默认处于普通文档流层级，z-index 对其无效（除非同时设 position: relative/absolute/fixed）：
立即学习“前端免费学习笔记（深入）”；
- 若需层叠控制，应放弃纯浮动，改用定位+z-index组合，例如：
img { float: left; position: relative; z-index: 2; } - 多个浮动元素水平排列时，注意宽度总和不能超过父容器，否则末尾元素会换行并可能被上一行浮动元素视觉遮挡——此时应检查 box-sizing 和内边距/外边距是否超出预期
- 用 min-width 或媒体查询保障响应式下浮动区域仍有足够空间，减少意外覆盖
现代替代方案：逐步淘汰浮动布局
浮动本意是实现文字环绕图片，而非页面整体布局。当前主流已转向更可控的方案：
- 单列/多列文本环绕：用 shape-outside 配合 float 实现非矩形环绕（如圆形头像旁的文字流）
- 整体页面布局：优先使用 Flexbox（一维）或 Grid（二维），代码简洁、响应友好、无清除烦恼
- 兼容老项目时，可在关键浮动模块外包裹一层 display: flow-root 容器，既清除又不触发滚动条等副作用
