浮动布局通过float使元素脱离文档流，导致父容器高度塌陷；使用clearfix伪元素可解决此问题；现代方案推荐overflow: hidden或display: flow-root；新项目应优先采用Flexbox或Grid。
在CSS布局发展早期，浮动（float）是实现多列布局的主要手段。虽然现代开发更多使用Flexbox或Grid，但在维护旧项目或特定场景下，理解浮动与clearfix依然重要。
浮动布局的基本原理
通过设置 float: left 或 float: right，元素会脱离正常文档流，向指定方向靠拢，其他内容围绕其排列。常用于图文环绕、多栏结构等。
但浮动带来一个常见问题：父容器无法自动感知浮动子元素的高度，导致高度塌陷，影响后续布局。
示例问题：父div包含两个左浮动的子div，父元素高度显示为0，背景色不显现。
clearfix解决高度塌陷
clearfix是一种清除浮动影响的技术，确保父容器正确包裹浮动子元素。
立即学习“前端免费学习笔记（深入）”；
最经典的方法是使用伪元素创建一个不可见的块级元素，并为其添加清除属性。
HMCSS通用企业网站系统1.0
下载
HMCSS是由河马工作室全新开发的通用的企业网站系统，是PHP+MYSQL的架构，采用DIV+CSS的方式进行网页布局，网站的功能包括有：企业简介，图片展示幻灯，产品图片滚动，企业荣誉，实力展示，产品分类及展示，网上招聘，在线留言，联系我们，在线地图等内容，另外还带有完整的管理后台，如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本，就是上述的这些内容。后面我们还要加上产品
content: "";
display: block;
clear: both;
}
将这个类应用到包含浮动元素的父容器上，即可修复高度塌陷问题。
现代替代方案与优化建议
尽管clearfix有效，但现在有更简洁的原生方法处理包含块问题。
- overflow: hidden —— 简单直接，但可能裁剪阴影或定位元素
- display: flow-root —— 现代推荐方式，创建新的块格式化上下文，无副作用
- 优先使用 Flexbox 或 Grid 布局，避免依赖浮动实现结构
对于仍需兼容旧浏览器的项目，保留clearfix是一个稳妥选择；新项目建议逐步转向更现代的布局方式。
基本上就这些。掌握浮动与清除机制，有助于理解CSS布局演变，也能更好应对复杂兼容场景。
