父容器默认由子元素撑开高度，浮动时需清除或触发BFC，推荐使用display: flow-root或flex/grid布局实现自适应。
要让CSS容器的高度自适应其子元素的内容高度，也就是由子元素“撑开”，关键在于理解盒模型和清除浮动、避免高度塌陷。默认情况下，块级容器会随着子元素增加而自动扩展高度，但在某些布局中（如使用浮动或绝对定位），容器可能无法正确包裹子元素。
1. 正常文档流中的高度自适应
在标准文档流中，父容器默认会根据子元素内容撑开高度：
说明： 只要不设置固定高度（height），也不触发BFC异常，div等块级元素会自然包裹子元素。示例：
2. 浮动导致高度塌陷及解决方法
当子元素使用 float 时，父容器可能“塌陷”为0高度，因为它脱离了文档流。
问题： 父容器无法感知浮动子元素的存在。解决方案有以下几种：
樱桃企业网站管理系统3.1 bulid20130614
下载
樱桃企业网站管理系统全DIV+CSS模板，多浏览器适应，完美兼容IE6-IE8,火狐，谷歌等符合标准的浏览器，模板样式集中在一个CSS样式中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽，适合新手自己操作修改。新闻，产品，单页独立关键字设计，提高搜索引擎收录。 后台地址：admin/login.asp 后台账户:admin 密码:admin （
- 添加清除浮动： 在最后一个子元素后加一个清除浮动的元素或伪类。
- 使用 ::after 伪元素：
.container {
overflow: hidden; /* 或 auto */
}
/* 或更通用的方式 */
.container::after {
content: "";
display: block;
clear: both;
}
-
触发BFC（块格式化上下文）： 使用
overflow: hidden、display: flow-root等。
推荐现代写法：
.container {
display: flow-root; /* 自动包含浮动子元素，无需额外标签 */
}
3. Flex 和 Grid 布局天然支持撑开
使用现代布局方式，父容器会自动适应子元素高度。
- Flex 示例：
.container {
display: flex;
flex-direction: column;
border: 1px solid red;
}
此时即使子元素高度变化，父容器也会随之撑开。
- Grid 示例：
.container {
display: grid;
align-content: start;
row-gap: 10px;
}
4. 避免 fixed、absolute 导致脱离文档流
如果子元素使用 position: absolute，它将脱离文档流，父容器无法被其撑高。
position: relative 定位，但不会影响父级高度计算。
若需要撑开，应避免对子元素使用 absolute，或手动设置父元素最小高度（min-height）模拟内容空间。
基本上就这些。只要不破坏文档流或正确处理浮动与布局模式，父容器就能自然被子元素撑开高度。关键是选择合适的布局方式并理解每个属性的影响。
