在css中给浮动元素直接添加 clear 属性无效，是因为 clear 属性的作用机制是要求当前元素的边框顶边（或底边）位于之前所有浮动元素的下方，而浮动元素本身已经脱离了标准文档流，无法被后续的 clear 规则所“感知”或约束。要让清除浮动生效，必须将 clear 应用于浮动元素之后的兄弟元素、父容器，或者使用伪元素等技巧来创建一个非浮动的上下文。
为什么浮动元素自身设置 clear 无效
当你对一个设置了 float: left 的元素同时设置 clear: both 时，浏览器会忽略这个 clear 声明。这是因为 clear 的定义是：该元素的顶部外边距边界不能低于任何先前创建的浮动框的底部外边距边界。然而，浮动元素本身不参与正常的块级布局计算，它的位置是由其前一个兄弟元素决定的。如果一个浮动元素前面没有浮动元素，或者前面的元素也是浮动的，那么它自身的 clear 属性就没有参照物来强制它下移。换句话说，clear 是用来控制“下一个”元素如何避开“上一个”浮动元素的，而不是用来控制浮动元素自己如何移动的。
div.container { width: 300px; border: 1px solid #ccc; } div.float-item { float: left; width: 100px; height: 100px; background: lightblue; /* clear: both; */ } div.clearfix { clear: both; }
在上述代码中，如果取消注释 clear: both 并加在 .float-item 上，该蓝色方块依然会紧贴容器的左上角，因为它是第一个子元素，前面没有浮动元素需要清除。只有 .clearfix 这个后续元素会因为 clear: both 而被推到蓝色方块下方。
常见的清除浮动解决方案对比
既然直接对浮动元素使用 clear 无效，开发者通常采用以下几种方式来确保父容器正确包裹浮动子元素，或者防止后续内容被浮动影响。最经典且兼容性最好的方法是“ clearfix ”技术，即在父容器上使用伪元素 ::after 插入一个空的块级元素，并赋予其 clear: both。这种方法不需要修改HTML结构，只需在CSS中添加几行代码。另一种现代方案是使用 Flexbox 或 Grid 布局，从根本上避免使用浮动，从而不再需要清除浮动。但在维护旧项目时，了解 clearfix 的原理至关重要。
.clearfix::after { content: ""; display: table; clear: both; }
这段代码会在 .clearfix 元素的末尾插入一个不可见的伪元素，该元素是一个块级元素且具有 clear: both 属性。由于伪元素存在于标准文档流中，它会受到 clear 规则的约束，被迫移动到所有浮动子元素的下方。由于伪元素高度为零（除非有内容），它不会占据额外空间，但它的存在迫使父容器的高度扩展到包含这些浮动元素，从而解决了父容器高度塌陷的问题。
基于伪元素清除浮动时的具体表现
在使用 ::after 伪元素进行清除浮动时，一个关键的具体问题是伪元素本身的显示类型。如果仅设置 clear: both 而不设置 display，伪元素默认可能是 inline，这可能导致在某些浏览器中清除效果不完全或出现意外的空白间隙。因此，通常建议显式设置 display: block 或 display: table。此外，如果父容器本身也有浮动，那么仅仅依靠子元素的 clearfix 可能不足以解决整个页面的布局问题，此时需要在更外层的应用容器上也应用 clearfix 或使用 BFC（块级格式化上下文）机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
