使用clear属性可解决浮动导致的高度塌陷，推荐通过clearfix伪元素清除浮动，既高效又语义化。
在CSS中，当元素使用了浮动（float）后，可能会导致父容器无法正确包裹子元素，出现高度塌陷的问题。为了解决这个问题，就需要使用 clear 属性来清除浮动带来的影响。
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>
这样父容器就能包含所有子元素，避免高度塌陷。
立即学习“前端免费学习笔记（深入）”；
更现代、语义化的方法是使用 ::after 伪元素来清除浮动，无需额外HTML标签。
.clearfix::after {
content: "";
display: block;
clear: both;
}
将这个类应用到包含浮动元素的父容器上：
<div class="container clearfix"> <div class="box" style="float: left;">左浮动</div> <div class="box" style="float: right;">右浮动</div> </div>
这种方法既干净又高效，是目前广泛采用的方案。
除了 clear 属性，还有几种方式也能达到清除浮动的效果：
基本上就这些。虽然浮动在响应式布局中已逐渐被替代，但在老项目或特定场景中仍会遇到，掌握 clear 的用法依然重要。推荐使用伪元素方案，简洁且不影响结构。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
638
收藏
