浮动元素脱离文档流导致父元素不撑开宽高是css规范行为，非bug；overflow:hidden触发bfc最稳定，伪元素clear:both次之，慎用父元素浮动或inline-block。
float父元素不撑开宽度，本质是脱离文档流
浮动元素会从普通文档流中“抽离”，导致父容器计算高度和宽度时直接忽略它。这不是bug，是CSS规范里明确的行为——float 的设计目标就是文字环绕，不是布局容器。
所以强行让父元素“被撑开”，其实是绕过 float 的原始语义，用其他机制补上尺寸计算逻辑。
用 overflow: hidden 触发BFC是最稳的解法
给父元素加 overflow: hidden（或 auto、scroll）能立刻生效，因为这会触发BFC（块级格式化上下文），BFC内部的浮动子元素会参与父容器的高度/宽度计算。
- 兼容性好，IE6+ 都支持
- 不需要额外HTML结构，也不影响子元素浮动行为
- 注意：如果父元素本就有溢出内容，
hidden会裁剪，此时改用overflow: auto - 不要用
overflow: visible—— 它不触发BFC，无效
clear:both伪元素清除法更可控但要写CSS
在父元素末尾插入一个清除浮动的伪元素，等价于加了一个 <div style="clear:both"></div>，视觉上撑开了高度，也间接让宽度表现更符合预期（尤其当子元素有水平方向浮动时）。
- 推荐写法：
::after { content: ""; display: table; clear: both; } -
display: table比block更安全，避免某些IE下外边距合并问题 - 别漏掉
content: ""—— 没内容的伪元素不会渲染，clear就没意义 - 这个方法对宽度的“撑开”效果不如BFC稳定，尤其当浮动子元素宽度总和小于父容器时，父宽仍可能收缩
display: inline-block 或 float 父元素？慎用
让父元素自己也 float 或设为 display: inline-block，确实能让它“看起来”被撑开，但这只是把问题转移了：
- 父元素浮动后，它上面的兄弟块级元素会“塌陷”上来，布局链断裂
-
inline-block会引入看不见的空白间隙（换行符/空格），需要调font-size: 0或注释掉HTML空白，维护成本高 - 两者都会让父元素失去块级默认宽度（100%），变成“内容宽度”，容易引发意料外的缩窄
- 现代布局中，这类hack已基本被
flex或grid替代，没必要为兼容老代码硬扛
BFC 和伪元素法覆盖了95%的真实场景；剩下那5%，往往说明该换布局模型了——浮动本身就不适合做容器布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
