清除浮动必须写在浮动元素的父容器上，因为浮动会脱离文档流导致父容器高度塌陷，只有在父容器上触发BFC或使用清除机制（如::after、overflow、flow-root）才能使其正确包裹浮动内容。
清除浮动应该写在浮动元素的父容器上，而不是浮动元素自身或子元素上。这是因为浮动会脱离文档流，导致父容器高度塌陷，清除浮动的本质是让父容器“感知”到内部浮动元素的存在，从而正确计算高度。
为什么必须写在父元素上
浮动元素不再占据文档流空间，父容器无法自动包裹它们，表现为高度为0。只有在父容器上触发BFC（块级格式化上下文）或使用清除机制，才能让父容器重新包含浮动内容。
- 写在浮动元素自身（如Float: left; clear: both;）无法解决父容器塌陷问题
- 写在子元素（非浮动的后续兄弟元素）上只能影响该元素的布局，不能撑开父容器
- 只有作用于父容器，才能让其建立新的布局上下文或插入清除节点，真正修复高度
常用清除方式及写法位置
所有方法都加在父容器的css规则中：
- 伪元素法（推荐）：.parent::after { content: “”; display: table; clear: both; }
- overflow法：.parent { overflow: hidden; }（或auto，注意可能触发滚动条）
- display: flow-root（现代方案）：.parent { display: flow-root; }（最简洁，兼容性需查目标环境）
避免常见错误写法
以下写法无效或不推荐：
立即学习“前端免费学习笔记（深入）”；
- 给浮动元素加clear: both;——它只影响自身位置，不修复父容器
- 在父容器内单独加一个空
——结构冗余，应优先用CSS伪元素替代
- 把清除样式写在子元素的类里，却没确保它位于浮动元素之后——顺序错则清除失效
实际应用小提示
多数情况下，直接给父容器添加display: flow-root;即可；若需兼容IE，用伪元素法并配合zoom: 1;（针对IE6/7）。关键是记住：清除浮动不是“处理浮动元素”，而是“修复它的父容器”。