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