使用 overflow:auto 或 clearfix 可解决css多列浮动布局中因浮动导致的父容器高度塌陷问题，前者通过触发bfc实现高度自适应，后者利用伪元素清除浮动，兼容性好且不影响溢出内容，两种方法均有效，选择取决于具体场景。
当使用CSS多列浮动布局时，如果各列内容高度不一致，父容器可能会出现高度塌陷，导致布局错乱。这是因为浮动元素脱离了文档流，父元素无法自动感知子元素的高度。解决这个问题的关键是清除浮动，让父容器正确包裹所有子列。
使用 overflow:auto 触发BFC
给父容器设置 overflow: auto 可以触发块级格式化上下文（BFC），使父元素包含内部的浮动元素，从而实现高度自适应。
- 简单直接，只需一行CSS
- 兼容性好，适用于大多数现代浏览器
- 注意：避免在需要溢出内容（如弹窗、下拉菜单）的容器上使用，可能造成内容被裁剪
示例代码：
.container {
overflow: auto; /* 包含浮动子元素 */
}
.column {
float: left;
width: 50%;
}
使用clearfix清除浮动
通过添加一个专门的清除浮动类（clearfix），利用伪元素在DOM末尾插入隐藏元素并清除浮动，确保父容器高度正确。
立即学习“前端免费学习笔记（深入）”；
- 更语义化，不影响容器的其他样式行为
- 不会产生意外的滚动条或裁剪问题
- 广泛用于各类CSS框架中（如Bootstrap）
常见clearfix写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将该class应用到浮动容器上即可：
<div class="container clearfix"> <div class="column">左侧内容</div> <div class="column">右侧内容</div> </div>
基本上就这些。两种方法都能有效解决多列浮动布局高度不一致的问题，选择哪种取决于具体场景和项目规范。overflow:auto 更简洁，clearfix 更灵活可靠。不复杂但容易忽略。
