float元素导致父容器高度塌陷，因脱离文档流；推荐用overflow:hidden或display:flow-root触发BFC解决，避免clear:both冗余标签；现代布局应优先使用flex/grid而非float。
float 元素导致父容器高度塌陷
这是 float 布局最典型的问题：float 元素脱离文档流，父容器无法感知其高度，表现为 height: 0 或内容被“压扁”。常见于导航栏、图文混排、多列卡片等场景。
- 浏览器渲染时，浮动元素不参与父级高度计算
- 父容器若无其他非浮动子元素或固定高度，就会“看不见”子项
- 后续元素可能向上偏移，布局错乱
clear: both 不是清除浮动的正确写法
clear: both 只是让某个元素避开左右浮动，它本身不触发 BFC，也不影响父容器高度。把它加在子元素末尾（比如 <div style="clear:both"></div>）能“撑开”父级，但属于副作用，不是语义化解法，且容易引入冗余 DOM。
- 该方式依赖额外空标签，HTML 结构污染
- 若父容器有
padding或border，空div仍可能不占位（需设height: 0; font-size: 0等 hack） - 现代项目中应避免这种“补丁式”修复
推荐用 overflow: hidden 触发 BFC
给父容器设置 overflow: hidden（或 auto、scroll）是最轻量、兼容性好（IE6+）、无需额外 HTML 的方案。原理是它会创建一个新的块级格式化上下文（BFC），而 BFC 区域会包含内部浮动元素的高度。
/* 推荐：简洁有效 */
.container {
overflow: hidden; /* 或 overflow: auto */
}- 注意：若父容器本身需要横向滚动，慎用
hidden，改用auto - IE6/7 下需额外添加
zoom: 1触发 hasLayout - 该方式不影响布局流，也不改变子元素行为
更现代的替代方案：display: flow-root
display: flow-root 是专为解决此问题设计的 CSS 属性，语义清晰、无副作用，且不干扰溢出行为。它强制创建 BFC，但不像 overflow 那样附带隐藏或滚动语义。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flow-root;
}- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 支持
- 旧版浏览器（如 IE）完全不支持，需配合
@supports或降级处理 - 如果项目已放弃 IE，这是目前最干净的解法
真正要注意的是：别把 float 当布局主力用。现在 flex 和 grid 能更好处理对齐、换行、自适应等需求。float 仅建议用于文字环绕图片这类经典场景——否则，问题只会从“清浮动”蔓延到“响应式错位”“垂直居中失效”“z-index 异常”上。
