直接加 overflow: hidden 或 overflow: auto 可触发 BFC 解决父容器不包裹浮动子元素导致的高度塌陷和内容溢出问题，clear: both 仅控制位置无法裁剪溢出，display: flow-root 是更语义化的现代替代方案但兼容性有限，浮动布局已不推荐用于多列布局。
父容器不包裹浮动子元素，内容溢出怎么办
直接加 overflow: hidden 或 overflow: auto 是最常用也最有效的解法。它会触发 BFC（块级格式化上下文），让父容器重新“感知”浮动子元素的高度，从而正确撑开并裁剪溢出部分。
常见错误现象是：父 div 高度塌陷成 0，背景、边框消失，后续元素上移——这不是 CSS “bug”，而是浮动脱离文档流后的自然表现。
- 仅当父容器不需要滚动时，优先用
overflow: hidden；它轻量、兼容性好（IE6+） - 如果父容器内真有横向内容要滚动，才用
overflow: auto，但注意 Safari 下可能意外触发滚动条 - 避免用
overflow: scroll，它强制显示滚动条，影响布局和语义
为什么 clear: both 不解决溢出裁剪
clear: both 只能控制元素自身位置（避开前面的浮动），不能改变父容器的 BFC 状态，所以它对“父容器高度塌陷”或“内容溢出不裁剪”完全无效。
典型误用场景：在浮动子元素后面加一个空 div 并设 clear: both ——这确实能撑高父容器，但只是视觉上“骗过”了高度计算，并未建立 BFC，父容器依然不会裁剪溢出内容。
- 若目标是清除浮动影响，
clear有用；若目标是裁剪溢出，它没用 - 想同时撑高 + 裁剪，必须触发 BFC，
overflow类属性、display: flow-root或float自身都行，但clear不在其中
display: flow-root 是更干净的替代方案吗
是的，display: flow-root 是专为解决这个问题设计的现代方案：它明确创建 BFC，且不带 overflow 的副作用（比如隐藏焦点轮廓、影响 clip-path 行为等）。
但它在 IE 中完全不支持，Chrome 58+、Firefox 57+、Safari 10.1+ 才可用。如果项目还需兼容 IE11 或更早版本，就别用它。
- 写法简单：
display: flow-root直接加在父容器上 - 比
overflow: hidden更语义化——你不是为了隐藏内容，而是为了建立块格式化上下文 - 注意：某些旧版 Safari 对
flow-root内的min-height处理异常，测试时别漏掉这个边界
浮动布局本身还值得继续用吗
在 Flexbox 和 Grid 成为主流的今天，纯靠 float 做多列布局已属于技术债。它脆弱、依赖清除、响应式难控制，而且一旦混用 Flex/Grid 容易引发嵌套 BFC 冲突。
真正需要保留浮动的场景只剩两个：文字环绕图片（float: left/right on img），以及极老系统的兼容性补丁。
- 新项目中，用
display: flex替代浮动做导航栏、卡片列表等，代码更直白，维护成本更低 - 如果必须用浮动（比如维护遗留 CMS 模板），那就老老实实用
overflow: hidden收尾，别折腾伪元素或zoom: 1 - 最常被忽略的一点：浮动元素若设置了
vertical-align，可能在行内上下文里引发意外基线偏移，调试时记得检查 computed styles
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
