为什么CSS浮动后子元素会100%无法自适应父级清除浮动状态？

本文共计674个文字，预计阅读时间需要3分钟。

这段内容描述了CSS中`float`属性的行为及其对布局的影响。以下是简化后的版本：

overflow: hidden 是最常用解法，但副作用得提前知道

给父容器加 overflow: hidden 能触发 BFC（块级格式化上下文），让父级重新包含浮动子项，从而撑开高度。但它不是“清除浮动”，是“重建容器边界”。要注意：

• 所有超出父容器范围的 position: absolute 子元素会被裁剪（比如下拉菜单、tooltip）
• 在 IE6/7 中需配合 zoom: 1 或 height: 1% 才能触发 hasLayout
• 如果父容器本就设置了 overflow: auto 或 scroll，加 hidden 会直接禁掉滚动，得权衡

display: flow-root 是现代标准解，但兼容性有断层

display: flow-root 是专为解决这类问题设计的 CSS 属性，同样触发 BFC，但无裁剪副作用，语义清晰，也不影响子元素定位。