用 display: flow-root 最干净，现代浏览器全支持且无副作用；IE 需用伪元素 clearfix 方案，确保 display: table 和 clear: both 同时生效。
浮动元素导致父容器高度塌陷怎么办
父容器没高度，里面浮动的子元素就“飘”出去了，底下内容往上顶、互相重叠——这不是样式错乱，是盒模型根本没把浮动元素算进布局流里。
核心问题在于：float 会让元素脱离文档流，父容器无法感知其尺寸。常见于导航栏、图文混排、卡片列表等场景。
- 别指望给父容器加
height硬撑，响应式下会立刻失效 -
overflow: hidden能触发 BFC 解决塌陷，但可能意外裁剪阴影、下拉菜单等溢出内容 - 用
display: flow-root最干净，现代浏览器全支持，且不带副作用
为什么 clear:both 放在末尾有时无效
clear: both 本身只控制“当前元素不能紧贴前面的浮动元素”，它不修复父容器塌陷，只是让后续块级元素“退到浮动下方”。如果它后面没内容，或者它自己也被浮动影响（比如也设了 float），那就白写了。
- 必须确保
clear: both元素是块级、未浮动、且位于浮动元素之后的 DOM 顺序中 - 写成
<div style="clear: both;"></div>是最稳妥的用法，别依赖空标签以外的语义化元素自动生效 - 若父容器设置了
height或min-height，clear可能被视觉掩盖，实际布局仍错乱
display: flow-root 比 clear:both 更可靠的原因
display: flow-root 创建一个独立的块级格式化上下文（BFC），天然包含内部浮动元素的高度，不需要额外 DOM 节点或 hack。
立即学习“前端免费学习笔记（深入）”；
- 兼容性：Chrome 58+、Firefox 53+、Safari 10.1+、Edge 16+，移动端基本无压力
- 性能更好：没有额外渲染节点，也不触发重排链式反应
- 参数差异：它和
display: block行为一致，只是多了 BFC 特性，可直接替换旧写法 - 示例：
.container { display: flow-root; }—— 一行解决，无需改 HTML 结构
IE8–11 下必须用 clear:both 怎么写才稳
老项目绕不开 IE，此时 display: flow-root 不可用，得回归传统方案，但要注意细节。
- 推荐用伪元素清除法：
.clearfix::after { content: ""; display: table; clear: both; }，比空 div 更轻量 - 别漏写
display: table（或block），否则clear在 IE 中不生效 - 如果父容器有
zoom: 1（IE 触发 hasLayout），要和伪元素方案配合，否则部分 IE8 下仍塌陷 - 避免在 flex 或 grid 容器里滥用
clear，它们本身不参与浮动流，加了也无效
真正容易被忽略的是：清除浮动不是目的，让父容器正确参与文档流才是。很多问题表面是重叠，根子在布局上下文没建对——尤其当浮动遇上 transform、position: absolute 或新式布局时，clear 就彻底失灵了。
