浮动元素脱离文档流导致父容器高度塌陷，解决方法是触发BFC或清除浮动；推荐clearfix（兼容IE6+）或overflow:auto/hidden（现代简洁），二者均使父容器包含浮动子元素。
浮动元素会脱离文档流，导致父容器无法感知其高度，从而出现高度塌陷（表现为父容器高度为0）。解决的关键是让父容器“包含”浮动子元素，常用方法就是触发BFC或清除浮动。
用clearfix清除浮动（推荐兼容方案）
给父容器添加一个通用的clearfix类，通过伪元素在末尾插入并清除浮动，不改变布局逻辑，兼容性好（支持IE6+）。
- 在CSS中定义clearfix：
content: "";
display: table;
clear: both;
}
.clearfix { *zoom: 1; } /* IE6/7 hack */
- 在HTML中给父容器加上class：
<div class="clearfix">...</div> - 注意：务必确保伪元素是块级且
clear: both，display: table可触发BFC并避免外边距合并
给父容器设置overflow:auto（简洁现代方案）
设置overflow: auto或hidden会触发BFC，使父容器重新计算包含浮动元素的高度。代码少、见效快，适合现代项目。
-
overflow: auto在内容溢出时会出现滚动条（多数情况下无影响） -
overflow: hidden更常用，但要注意它会裁剪溢出内容（如绝对定位子元素超出边界时） - 避免用
overflow: visible（默认值，不触发BFC）或scroll（始终显示滚动条）
其他可行方式（按需选用）
除上述两种主流方法外，还有几个补充方案：
立即学习“前端免费学习笔记（深入）”；
- 给父容器也设浮动：简单但会让父容器也脱离文档流，通常不推荐
-
添加空的清除元素：
<div style="clear:both"></div>，语义差、冗余HTML，已基本淘汰 -
使用flex或grid布局：父容器设
display: flex或grid天然包含子项，浮动本身失去意义，适合新项目重构
基本上就这些。clearfix兼顾兼容与语义，overflow:auto简洁高效——选哪个取决于你的浏览器支持要求和项目规范。
