clear属性在CSS中用于清除元素周围的浮动，防止后续元素被浮动元素影响布局。它通常应用于需要脱离浮动影响的元素，确保页面结构清晰、布局稳定。

CSS中的clear属性是解决浮动布局难题的关键工具，它通过控制元素两侧是否允许浮动元素来防止布局错乱和父容器高度塌陷；尽管现代开发更倾向使用BFC触发（如display: flow-root）或伪元素clearfix技巧等更优雅的方案，但深入理解clear的工作机制——尤其是left、right、both等取值如何精准干预文档流——不仅能帮你高效修复遗留代码中的浮动问题，更能夯实对CSS布局底层逻辑的掌握，让响应式与兼容性处理更加游刃有余。

当元素设置了浮动（float）后，它会脱离正常的文档流，可能导致父容器无法正确包裹子元素，或者后续的元素错位。为了解决这个问题，CSS 提供了 clear 属性来控制元素在浮动元素旁边的位置。

clear 属性的作用

clear 属性用于指定一个元素是否应该在左侧、右侧或两侧都不允许出现浮动元素。它常用于清除前面浮动元素对当前元素布局的影响。

常见取值包括：

• clear: left — 元素的左侧不允许有浮动元素
• clear: right — 元素的右侧不允许有浮动元素
• clear: both — 元素左右两侧都不允许有浮动元素
• clear: none — 默认值，允许两侧出现浮动元素

解决父容器高度塌陷

当父元素内部的所有子元素都设置了浮动时，父元素可能会“塌陷”，即高度变为0，因为它无法感知浮动子元素的存在。使用 clear 可以帮助恢复正常的高度计算。

一种传统做法是在最后一个浮动子元素之后添加一个空元素，并设置 clear: both：

<div class="container">
  <div class="box" style="float: left;"></div>
  <div class="box" style="float: right;"></div>
  <div style="clear: both;"></div>
</div>

这个清浮动的 div 会强制自己位于所有浮动元素下方，从而使父容器正确包裹子元素。

现代替代方案

虽然 clear 有效，但现在更推荐使用其他方法来清除浮动影响，比如：

• 触发 BFC（块级格式化上下文）：给父容器设置 overflow: hidden 或 display: flow-root
• ::after 伪元素清除法：通过 CSS 生成一个隐藏的清除元素，避免添加无意义的 HTML 标签

例如，常见的 clearfix 技巧：

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

基本上就这些。clear 属性虽老但实用，理解它有助于掌握页面布局中浮动的处理逻辑。现在多数情况会用更现代的方法，但在维护旧代码时仍会遇到。不复杂但容易忽略细节。

到这里，我们也就讲完了《clear属性在CSS中用于清除元素周围的浮动，防止后续元素被浮动元素影响布局。它通常应用于需要脱离浮动影响的元素，确保页面结构清晰、布局稳定。》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！