clear属性用于解决浮动布局问题，其常用值为left、right、both和none；通过设置clear: both可使元素下移至浮动元素下方，避免布局错乱。实际开发中推荐使用伪元素清除法，如定义clearfix类配合::after实现更语义化、可维护的清除方案。

在css中，clear 属性用于控制元素在浮动元素旁边的位置，常用来清除浮动带来的布局问题。当一个元素设置了 Float 后，后续的元素可能会围绕它排列，导致结构错乱。使用 clear 可以让元素“下移”到浮动元素下方，从而恢复正常文档流布局。

clear 属性的基本取值

clear 属性有以下几个常用值：

• left：元素左侧不允许有浮动元素，会下移到左边浮动元素的下方。
• right：元素右侧不允许有浮动元素，会下移到右边浮动元素的下方。
• both：元素左右两侧都不允许有浮动元素，会下移到任意浮动元素的下方（最常用）。
• none：默认值，允许两侧存在浮动元素，不进行清除。

如何使用 clear 清除浮动

假设有两个浮动的 div，第三个 div 希望显示在它们下面而不是旁边，可以这样处理：

 <div style="float: left; width: 100px; background: #ccc;">左浮动</div> <div style="float: right; width: 100px; background: #cfc;">右浮动</div> <div style="clear: both;">我出现在它们下方</div> 

通过给最后一个 div 设置 clear: both;，它就会自动换行并显示在前面两个浮动元素的下方。

立即学习“前端免费学习笔记（深入）”；

人声去除

用强大的AI算法将声音从音乐中分离出来

23

查看详情

常见清除浮动的实践方法

除了直接给下一个元素加 clear，还有几种常见的清除浮动技巧：

• 添加空元素 + clear：在浮动元素后添加一个空 div，并设置 clear:both。虽然有效但不够语义化。
• 使用伪元素清除法（推荐）：通过 ::after 伪元素插入内容并清除浮动，更现代且无需额外标签。

例如，为包含浮动元素的父容器定义一个clearfix类：

 .clearfix::after {   content: "";   display: block;   clear: both; } 

然后将该类应用到父元素上，即可防止子元素浮动导致父容器高度塌陷。

总结

clear 属性是解决浮动布局问题的基础手段，合理使用 clear: both 能有效控制元素位置。在实际开发中，推荐结合伪元素方法实现更干净、可维护的清除浮动方案。基本上就这些，不复杂但容易忽略。

以上就是在