clear属性用于控制元素两侧是否允许浮动，常用both值清除双侧浮动；clearfix通过伪元素::after添加清除浮动的视觉格式化类，避免高度塌陷，无需额外标签；现代布局推荐使用Flexbox和Grid替代浮动。
在CSS布局中，浮动（float）曾是实现多栏布局的主要方式。但浮动元素会脱离正常文档流，导致父容器无法正确感知其高度，从而出现高度塌陷问题。为解决这一问题，clear 属性和 clearfix 技巧应运而生。下面详细介绍它们的原理与使用方法。
理解clear属性的作用
clear 属性用于控制元素两侧是否允许有浮动元素。它常用于清除前面浮动带来的影响。
常用取值包括：
- clear: left — 元素左侧不允许有浮动元素
- clear: right — 元素右侧不允许有浮动元素
- clear: both — 元素左右两侧都不允许有浮动元素
- clear: none — 默认值，允许两侧存在浮动
例如，若想让一个块级元素独占一行并避开前面的浮动元素，可设置：
立即学习“前端免费学习笔记（深入）”；
.clear-both {
clear: both;
}这种方法简单直接，但需额外添加HTML标签（如空div），不够优雅。
clearfix技巧：无需额外标签的清除方式
clearfix 是一种通过CSS伪元素自动清除浮动的方法，避免了在HTML中插入无意义的标签。
现代主流写法如下：
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}将该类应用在包含浮动子元素的父容器上，即可闭合浮动，恢复正常的高度计算。
说明：
- ::after 创建一个伪元素，作为最后一个子元素插入
- content: "" 是必须的，否则伪元素不生效
- clear: both 确保伪元素下方清除所有浮动
- height: 0; visibility: hidden 避免影响页面布局
兼容性与增强版本
在一些老式浏览器（如IE6/7）中，还需触发hasLayout机制以确保容器能正确包裹浮动元素。因此，常见的兼容性写法会加入zoom属性：
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* IE6/7 */
.clearfix {
*zoom: 1;
}其中 *zoom: 1 是IE专有语法，触发元素的hasLayout，帮助闭合浮动。
现代布局中的替代方案
随着Flexbox和Grid布局的普及，浮动已不再是主流布局手段。在新项目中，推荐使用更强大的布局方式：
- Flexbox：适合一维布局，自动处理对齐与空间分配
- CSS Grid：适合二维布局，精确控制行列结构
这些现代方法天然不依赖浮动，从根本上避免了清除浮动的问题。
基本上就这些。虽然浮动逐渐被取代，但在维护旧项目或特定场景下，掌握 clear 与 clearfix 依然很有必要。关键是要理解其原理，灵活选择合适方案。
