clear 清除浮动属性

最后更新：2026-09-13

clear clear 清除浮动属性

clear 属性用于控制元素是否允许左侧、右侧或两侧存在浮动元素，当设置为 left、right 或 both 时，元素会被移动到相应浮动元素的下方。它是处理浮动布局时防止布局错乱的重要工具。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS1
状态	标准

📝 语法

clear: none | left | right | both | inline-start | inline-end;

⚙️ 取值

值	类型	描述
`none \| left \| right \| both`	关键字	清除浮动

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
clear	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： clear: both 是最常用的值，表示元素左右两侧都不允许有浮动元素，会移动到所有浮动元素的下方。

注意： clear 属性只对块级元素生效，对 inline 元素无效。现代布局中，清除浮动更推荐使用伪元素 ::after 配合 clear: both 的 clearfix 方案。

❓ 常见问题

Qclear 和 clearfix 有什么区别？

Aclear 是 CSS 属性，作用于被浮动影响的下一个元素，让它移动到浮动元素下方，避免文字或块元素与浮动元素并排；clearfix 是一套清除浮动的技术方案（通常在父元素上用 ::after 伪元素 + clear:both 实现），作用是让父容器重新包裹住浮动子元素，解决高度坍塌。一个是属性，一个是完整方案。

Qclear 能用在浮动元素自身上吗？

A可以，但效果有讲究：在浮动元素上设置 clear 时，它会移动到前面同方向浮动元素的下方。例如某元素 float:left 且 clear:left，它会排到前面左浮动元素的下方，而不是所有浮动元素下方。clear:both 则让它移动到左右浮动元素都结束的下方，常用于浮动图片后文字另起一行的排版。

Qclear:both 是什么意思？

Aclear:both 表示元素左右两侧都不允许出现浮动元素，浏览器会把它推到前面所有浮动元素下方另起一行。left 只清左侧浮动，right 只清右侧。它是清除浮动最常用取值，配合 ::after 伪元素即可组成 clearfix 方案。

Qclear 属性不生效是什么原因？

A常见原因：1）clear 只对块级元素生效，用在 inline 元素（如 span）上无效；2）元素本身也是浮动元素，clear 只能移动到前面同方向浮动元素下方，效果与预期不同；3）设置 clear 的元素没有实际受浮动影响（浮动元素已经结束）。确认元素是块级且前面确有浮动元素即可。