浮动导致父容器高度塌陷、文字绕排错乱、定位冲突及IE兼容问题，根本原因是脱离文档流；应优先用BFC（如overflow:hidden或display:flow-root）或伪元素清除浮动，避免滥用。
浮动元素导致父容器高度塌陷
这是浮动布局最典型的副作用：当子元素全部浮动后，父容器会“看不见”它们，计算高度时当作空内容处理，结果高度变成 0，后续元素直接上移覆盖。
常见错误场景包括：
– 用 float: left 排列导航菜单项，但包裹的 高度为 0，背景色消失
– 卡片列表使用 float: left 布局，但外层 .container 无法撑开，导致页脚提前上浮
解决方式不是加固定高度（破坏响应性），而是触发 BFC 或清除浮动：
- 给父容器设置
overflow: hidden（或auto），强制创建 BFC - 在浮动元素末尾插入清浮动元素：
- 使用伪元素清浮动（更推荐）：
.clearfix::after { content: ""; display: table; clear: both; }然后给父容器加class="clearfix"
文字环绕浮动元素时换行错乱
当文本流遇到浮动元素，默认会绕行，但如果浮动元素后紧跟块级元素（如 立即学习“前端免费学习笔记（深入）”； 典型表现： 根本原因是：普通流中的块级元素不会自动避开浮动区域，除非显式声明 修复建议： 浮动本质是让元素脱离标准文档流，但仍部分参与行内格式化上下文。这会导致一些隐蔽冲突： 例如： 关键提醒：浮动不是定位工具，不要用它实现“右上角关闭按钮”这类需求——应使用 虽然现在基本不兼容 IE6，但老项目维护或遗留代码中仍可能踩中这些经典缺陷： 修复方案已成套路： 真正需要注意的是：这些 Bug 的存在，恰恰说明浮动从设计之初就不是为复杂布局服务的——它只是为文字环绕图片而生。一旦拿它搭整站布局，各种边界情况就会不断暴露出来。、clear，它可能部分嵌入浮动区域，造成文字被“切开”或段落错位。
标题紧随浮动图片后出现，但标题左侧被图片侵占，文字重叠clear。
、）加 clear: both
clear 的空元素或用 margin 隔开display: flow-root 替代浮动，天然规避绕排问题浮动元素脱离文档流引发定位冲突
position: relative 元素共存时，浮动元素的 z-index 行为不可靠（浮动本身无层叠上下文））若被浮动，其默认垂直对齐（baseline）会失效，和旁边文字不对齐.item { float: left; width: 200px; }
.input-group { float: left; }
input { vertical-align: middle; } /* 实际无效，因 input 已脱离行内上下文 */此时需改用 display: inline-block 或 Flex 替代。
position: absolute 配合相对定位父容器。IE6/7 下双倍边距 Bug 和 3px 文本偏移
margin（如 float: left + margin-left: 10px）会被渲染成 20px
3px，尤其在字号小、行高紧凑时明显
display: inline（IE6 下可消除该 bug，不影响其他浏览器）font-size: 0 再在子元素中重设字体（治标）；更彻底的是避免浮动图文混排，改用 vertical-align + inline-block
