浮动元素撑不开父容器需触发BFC，常用overflow:hidden；box-sizing:border-box须设在浮动元素自身；百分比超100%因空白字符、border/padding及像素四舍五入；IE中需注意box-sizing前缀及margin解析bug。
浮动元素撑不开父容器怎么办
这是浮动最经典的问题：父容器高度塌陷，后面的内容直接“穿”上来。根本原因是浮动元素脱离了文档流，父容器算高度时当它们不存在。
最直接的解法是触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素。常用且兼容性好的方式是给父容器加 overflow: hidden 或 overflow: auto —— 注意不是 visible，它不会触发 BFC。
其他可行但需留意的方案：
-
display: flow-root更语义化，现代浏览器支持良好，但 IE 完全不支持 - 伪元素清除法：
::after { content: ""; display: table; clear: both; }，兼容性最好，但代码稍冗余 - 避免用
float做布局——现在用flex或grid更稳妥
box-sizing: border-box 为什么必须设在浮动元素上
默认的 box-sizing: content-box 下，width: 50% + padding: 10px 实际占宽会超 50%，多个浮动元素加起来轻松突破 100%，导致换行或溢出。
立即学习“前端免费学习笔记（深入）”；
设成 box-sizing: border-box 后，width 包含 padding 和 border，百分比计算才真正“靠谱”。关键点在于：这个声明要落在浮动元素自身，而不是父容器。
常见疏忽：
- 只给父容器设
box-sizing，子元素仍按默认行为计算尺寸 - 用通配符重置时漏掉表单控件（如
input、textarea），它们在某些浏览器里默认不是border-box - 第三方 UI 库样式可能覆盖你的
box-sizing，建议用更具体的选择器或加!important（慎用）
百分比宽度相加超过 100% 的隐性原因
看起来写了 width: 50% + width: 50%，却还是换行？除了 box-sizing，还有几个隐形“加法项”：
- 浮动元素间的空白字符（换行/空格）会被渲染为
4px间隙 —— 解决方法：父容器设font-size: 0，子元素再单独设字体大小 - 边框（
border）和内边距（padding）在content-box下额外占空间 - 部分浏览器对小数像素四舍五入有差异，比如
33.3333%× 3 可能算出 99.9999% 或 100.0001%
稳妥做法：用 calc(50% - 1px) 预留容错空间，或改用 flex 的 flex: 1 自动均分。
IE 中浮动 + 百分比 + box-sizing 的兼容陷阱
IE8+ 支持 box-sizing，但需要带前缀：-ms-box-sizing。不过更麻烦的是 IE 的盒模型解析 bug：当浮动元素同时有 margin 和 border 时，某些版本会把 margin 计入总宽。
实操建议：
- IE 下尽量避免浮动元素设
margin-right或margin-left，改用padding搭配box-sizing: border-box - 测试时务必在真实 IE 环境（不是 Edge 兼容模式）中验证，特别是 IE9–10
- 如果项目必须支持 IE8，别碰
box-sizing，老老实实用固定像素或 JS 动态计算宽度
浮动本身不是问题，问题是它把一堆隐式依赖堆在一起：文档流、盒模型、渲染顺序、浏览器解析差异。稍有遗漏，页面就“松动”了。
