clear属性用于控制元素两侧是否允许浮动元素，解决浮动导致的布局问题。当子元素浮动时，父容器可能高度塌陷，传统方法是在末尾添加<div style=”clear: both;”></div>使父元素包裹住浮动子元素。现代方案更推荐通过触发BFC（如overflow: hidden）或使用伪元素清除浮动，例如.clearfix::after { content: “”; display: table; clear: both; }。尽管clear属性较老，但在处理旧代码时仍常见，理解其机制有助于掌握浮动布局逻辑。
当元素设置了浮动（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 属性虽老但实用，理解它有助于掌握页面布局中浮动的处理逻辑。现在多数情况会用更现代的方法，但在维护旧代码时仍会遇到。不复杂但容易忽略细节。
暂无评论