在父容器上使用clearfix最合理，因为浮动元素脱离文档流会导致父容器高度塌陷，只有作用于直接父容器才能让其“感知”浮动子元素并正确计算高度。
在父容器内部使用 clearfix 方案更合理，即把清除浮动的样式写在浮动元素的**直接父容器**上。
为什么写在父容器上最合理
浮动元素会脱离文档流，导致父容器高度塌陷。清除浮动的本质是让父容器“感知”到浮动子元素的存在，从而正确计算自身高度。只有作用于该浮动元素的直接父容器，才能真正解决塌陷问题。若写在更外层或子元素上，要么无效，要么治标不治本。
推荐的 clearfix 写法（现代简洁版）
在父容器上添加如下类，并确保它包裹了所有浮动子元素：
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 用
::after伪元素生成一个块级占位符，触发 BFC 并清除浮动 - 避免额外 HTML 标签，语义干净
- 兼容所有现代浏览器及 IE8+
不推荐的几种位置
- 写在浮动子元素自身上：无法影响父容器高度，无效
- 写在祖父容器上：可能误清其他无关浮动，逻辑错位
- 用
<div style="clear:both"></div>插入父容器末尾：破坏结构语义，增加无意义 DOM 节点
实际应用小提示
- 命名建议统一，如
.row、.list-wrap等布局类默认带 clearfix - 如果父容器已触发 BFC（如设置了
overflow: hidden），可不加 clearfix，但需注意溢出裁剪副作用 - Flex 或 Grid 布局已天然规避浮动塌陷，新项目优先考虑替代方案
