如何用CSS让父div高度随子div自动扩展

这个问题在CSS里太常见啦，多半是因为子元素（比如你的#mid）脱离了正常的文档流（最典型的就是用了float属性），导致父容器#main没法感知到它的高度，所以没法自动撑开。下面给你几种实用的解决办法，按需选择就行：

一、针对子元素用了浮动的情况：清除浮动 #

方法1：给父容器加overflow属性 #

直接给#main设置overflow: auto或者overflow: hidden，就能让它自动包裹子元素的高度：

#main {
  overflow: auto; /* 用hidden也可以，auto会在内容溢出时显示滚动条，hidden会截断溢出内容 */
}

原理是这个属性会让父容器创建一个BFC（块级格式化上下文），BFC会包含住内部的浮动元素，自然就能正确计算高度了。

方法2：使用clearfix伪元素技巧 #

这是更经典的清除浮动方案，不会有overflow可能带来的滚动条或内容截断问题：

#main::after {
  content: "";
  display: table;
  clear: both;
}

它的原理是在#main的末尾插入一个看不见的伪元素，强制清除左右两侧的浮动，让父容器能正确识别子元素的高度。

二、用现代CSS布局方案（更推荐，适合新项目） #

如果你的项目不用兼容太老的浏览器，直接用Flex或者Grid布局，从根源上避免浮动带来的问题：

Flex布局 #

把#main设为flex容器，它会自动适应子元素的高度：

#main {
  display: flex;
  flex-direction: column; /* 保持子元素垂直排列，默认是横向，根据你的结构调整 */
}

Flex布局不仅能解决高度自适应的问题，还能轻松实现各种复杂的布局，非常灵活。

Grid布局 #

同样，Grid布局也能让父容器自动包裹子元素：

#main {
  display: grid;
}

Grid是更强大的二维布局方案，如果你需要更复杂的排版，用它准没错。

额外说明 #

如果你的#mid没有用浮动，而是用了position: absolute，那它本来就完全脱离了文档流，父容器#main是没法自动适应它的高度的。这种情况建议换用上面的Flex/Grid布局，或者如果必须用absolute，可能需要用JS动态计算高度，但显然前两种方案更优雅。

内容的提问来源于stack exchange，提问作者KrazyKoder22