17370845950

浮动元素脱离文档流导致父容器高度塌陷，解决方法是触发BFC或清除浮动；推荐clearfix（兼容IE6+）或overflow:auto/hidden（现代简洁），二者均使父容器包含浮动子元素。

浮动元素会脱离文档流，导致父容器无法感知其高度，从而出现高度塌陷（表现为父容器高度为0）。解决的关键是让父容器“包含”浮动子元素，常用方法就是触发BFC或清除浮动。

用clearfix清除浮动（推荐兼容方案）

给父容器添加一个通用的clearfix类，通过伪元素在末尾插入并清除浮动，不改变布局逻辑，兼容性好（支持IE6+）。

• 在CSS中定义clearfix：

• 在HTML中给父容器加上class：...
• 注意：务必确保伪元素是块级且clear: both，display: table可触发BFC并避免外边距合并

给父容器设置overflow:auto（简洁现代方案）

设置overflow: auto或hidden会触发BFC，使父容器重新计算包含浮动元素的高度。代码少、见效快，适合现代项目。

• overflow: auto在内容溢出时会出现滚动条（多数情况下无影响）
• overflow: hidden更常用，但要注意它会裁剪溢出内容（如绝对定位子元素超出边界时）
• 避免用overflow: visible（默认值，不触发BFC）或scroll（始终显示滚动条）

其他可行方式（按需选用）

除上述两种主流方法外，还有几个补充方案：

• 给父容器也设浮动：简单但会让父容器也脱离文档流，通常不推荐
• 添加空的清除元素：，语义差、冗余HTML，已基本淘汰
• 使用flex或grid布局：父容器设display: flex或grid天然包含子项，浮动本身失去意义，适合新项目重构

基本上就这些。clearfix兼顾兼容与语义，overflow:auto简洁高效——选哪个取决于你的浏览器支持要求和项目规范。