浮动导致父容器高度塌陷，文字溢出；解决关键是触发bfc：overflow:hidden/auto兼容好但可能裁剪溢出，display:flow-root是现代推荐方案；伪元素清除比空div更可靠；flex/grid布局可彻底替代浮动并自动创建bfc。
浮动元素导致父容器高度塌陷，文字跑出容器边界
这是浮动最典型的副作用：父元素没设置高度时，内部仅靠浮动子元素撑开，一旦子元素脱离文档流，父容器就“看不见”它们，高度变成 0，后续文字自然溢出到浮动区域下方或外侧。
解决核心不是给父容器硬设 height（不灵活、响应式失效），而是让父容器“重新感知”浮动子元素的存在——也就是触发 BFC（块级格式化上下文）。
-
overflow: hidden、overflow: auto是最常用且兼容性好的方式（IE6+ 支持），但注意：如果子元素真有溢出内容（比如下拉菜单、弹窗），这个会把它裁掉 -
display: flow-root是现代标准解法（Chrome 64+/Firefox 58+/Safari 15.4+），它专为“创建无副作用的 BFC 容器”而生，不影响溢出行为，推荐新项目优先用 - 避免用
float: left或position: absolute给父容器自身设值——这会让它也脱离文档流，问题转移而非解决
为什么 clear: both 有时不管用
很多人在浮动元素后面加一个空 <div> 并设 <code>clear: both，以为能“清掉浮动”，但实际发现文字还是溢出。根本原因是：这个清除元素只影响它自己所在位置的布局，对父容器高度没有贡献——父容器依然不知道浮动子元素占了多高。
- 必须确保清除元素是父容器的最后一个子元素，且未被
display: none或visibility: hidden隐藏 - 如果清除元素用了
height: 0; line-height: 0; font-size: 0等缩身技巧，但没设overflow: hidden，某些旧版浏览器（如 IE7）可能仍不触发 BFC，导致父容器高度计算错误 - 更稳妥的写法是伪元素清除：
::after { content: ""; display: table; clear: both; }，比空标签更干净，也更容易复用
display: flex 或 display: grid 能替代浮动吗
能，而且应该替代。浮动本就不是为页面整体布局设计的，它的语义是“文字环绕图片”，强行用来做多列布局是历史包袱。
- 用
display: flex布局时，父容器自动成为 BFC，完全规避高度塌陷问题；子项默认不换行，可用flex-wrap: wrap控制 -
display: grid更适合二维布局（行列同时控制），同样自带 BFC，且无需额外清除逻辑 - 兼容性注意：IE10/11 对 Flex 有较多 bug（如
min-width失效），Grid 则基本不支持 IE；若需兼容 IE9 及以下，仍得回退到 BFC 触发方案
移动端适配时，width 限制和 BFC 的配合要点
单纯给浮动元素加 width: 100% 不解决溢出，因为宽度是相对于父容器计算的，而父容器本身高度已塌陷——你限制的是一个“看不见”的容器的宽度。
- 先确保父容器已触发 BFC（比如加
overflow: hidden），再设子浮动元素的width，否则宽度基准不可靠 - 在视口缩放或横屏场景下，用
max-width: 100%+box-sizing: border-box比固定width更安全，防止内容撑破容器 - 如果浮动元素含图片，记得给
img加max-width: 100%; height: auto，否则图片原始尺寸可能突破父容器限制
overflow 和 display: flow-root 的行为可能不一致——遇到诡异溢出，优先检查是否混用了这些特性。
