真要防止撑破需从盒模型、BFC和内容约束三处同时下手：浮动元素必须设box-sizing:border-box；父容器用display:flow-root触发BFC；所有替换元素加max-width:100%；文本块设word-break:break-word。
直接给父容器加 overflow: hidden 能“看起来”不撑破，但这是障眼法——它只是裁掉溢出部分，不是真正约束布局。真要防止撑破，得从盒模型、BFC 和内容约束三处同时下手。
box-sizing: border-box 必须作用在浮动子元素上
默认 box-sizing: content-box 下，width: 50% + padding: 12px + border: 1px 实际宽度是 50% + 26px，多个浮动项加起来轻松超 100%，必然换行或撑破边框。
- 必须显式写在浮动元素自身，比如
.float-item { box-sizing: border-box; width: 50%; padding: 12px; } - 通配符重置更省事：
* { box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } - 表单控件（
input、textarea）和图片容易被漏掉，需单独检查
父容器必须触发 BFC，且不能靠 overflow:hidden 硬裁
overflow: hidden 会创建 BFC，让父容器“感知”浮动高度，但它也会静默裁剪所有超出区域的内容——下拉菜单、position: absolute 的提示框、阴影都可能消失。
- 首选
display: flow-root：语义清晰、无裁剪副作用，Chrome 58+ / Firefox 57+ / Safari 15.4+ 均支持 - 兼容旧版 Safari？用
overflow: auto+max-height: none防滚动条误触发 - 老项目兜底用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，注意缺一不可
浮动子元素本身要防横向失控
即使 BFC 触发了、box-sizing 也设对了，一张没加约束的图片、一段无空格长 URL，照样能把父容器拉宽，触发水平滚动条。
立即学习“前端免费学习笔记（深入）”；
- 所有替换元素（
img、video、iframe）加max-width: 100%; height: auto; - 含文本的浮动块加
word-break: break-word或更激进的word-break: break-all - 避免在浮动元素上设
white-space: nowrap，除非你明确知道后果 - 如果用了
display: inline-block包裹浮动内容，补上vertical-align: top防空白间隙间接撑宽
最易被忽略的一点：浮动元素是否还在父容器的「渲染边界内」——这取决于它的总占用宽度（含 margin、border、padding、内容实际尺寸），而不是你写的百分比数字。浏览器不会为你四舍五入或自动容错。
