浮动元素脱离文档流导致父元素不撑开宽高是CSS规范行为，非bug；overflow:hidden触发BFC最稳定，伪元素clear:both次之，慎用父元素浮动或inline-block。
float父元素不撑开宽度，本质是脱离文档流
浮动元素会从普通文档流中“抽离”，导致父容器计算高度和宽度时直接忽略它。这不是bug，是CSS规范里明确的行为——
的设计目标就是文字环绕，不是布局容器。
所以强行让父元素“被撑开”，其实是绕过 float 的原始语义，用其他机制补上尺寸计算逻辑。
用 overflow: hidden 触发BFC是最稳的解法
给父元素加
（或
、
）能立刻生效，因为这会触发BFC（块级格式化上下文），BFC内部的浮动子元素会参与父容器的高度/宽度计算。
兼容性好，IE6+ 都支持
不需要额外HTML结构，也不影响子元素浮动行为
注意：如果父元素本就有溢出内容，
会裁剪，此时改用
不要用
—— 它不触发BFC，无效
clear:both伪元素清除法更可控但要写CSS
在父元素末尾插入一个清除浮动的伪元素，等价于加了一个
，视觉上撑开了高度，也间接让宽度表现更符合预期（尤其当子元素有水平方向浮动时）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
推荐写法：
比
更安全，避免某些IE下外边距合并问题
别漏掉
—— 没内容的伪元素不会渲染，
就没意义
这个方法对宽度的“撑开”效果不如BFC稳定，尤其当浮动子元素宽度总和小于父容器时，父宽仍可能收缩
display: inline-block 或 float 父元素？慎用
让父元素自己也
或设为
，确实能让它“看起来”被撑开，但这只是把问题转移了：
父元素浮动后，它上面的兄弟块级元素会“塌陷”上来，布局链断裂
会引入看不见的空白间隙（换行符/空格），需要调
或注释掉HTML空白，维护成本高
两者都会让父元素失去块级默认宽度（100%），变成“内容宽度”，容易引发意料外的缩窄
现代布局中，这类hack已基本被
或
替代，没必要为兼容老代码硬扛
BFC 和伪元素法覆盖了95%的真实场景；剩下那5%，往往说明该换布局模型了——浮动本身就不适合做容器布局。
floatoverflow: hiddenautoscrollhiddenoverflow: autooverflow: visible::after { content: ""; display: table; clear: both; }display: tableblockcontent: ""clearfloatdisplay: inline-blockinline-blockfont-size: 0flexgrid