优先用 display: flow-root 创建 bfc 包含浮动子元素；ie 兼容需用伪元素 clearfix；flex/grid 布局下浮动无效，无需清除；clear: both 加在兄弟元素上不能解决父容器塌陷。
浮动元素撑不开父容器怎么办
这是清除浮动最典型的症状：父元素高度塌陷，背景、边框消失，后续元素上移。根本原因是浮动元素脱离文档流，父容器计算高度时直接忽略它们。
实操建议优先用 display: flow-root —— 它创建新的块级格式化上下文（BFC），让父容器能包含浮动子元素，且无需额外标签或 hack。
-
flow-root在 Chrome 58+、Firefox 57+、Safari 10.1+ 均支持，IE 不支持 - 比
overflow: hidden更干净：不意外裁剪溢出内容，也不触发不必要的滚动条 - 直接加在父容器上，例如：
.wrapper { display: flow-root; }
老项目要兼容 IE 怎么办
IE6–8 不支持 flow-root，也对 overflow: hidden 敏感（可能遮住下拉菜单或 tooltip）。这时得回退到伪元素清除法，它稳定、无副作用、兼容到 IE6。
核心是给父容器添加 ::after 伪元素并设 clear: both：
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 必须写
content: ""，否则伪元素不渲染 -
display: table比block更稳妥，避免某些 IE 下的行高异常 - 不要只用
:after（单冒号），IE8 只认双冒号写法::after，但实际中多数项目已放弃 IE8，可按需取舍
Flex 或 Grid 布局里还要清浮动吗
不用。一旦父容器设了 display: flex 或 display: grid，子元素自动参与该格式化上下文，浮动行为被忽略——float 对 flex item 和 grid item 完全无效。
这意味着：
- 浮动元素在 flex 容器里会“退化”为普通块级元素，
float: left失效 - 因此不存在“撑不开父容器”的问题，也无需任何清除手段
- 如果发现 flex 布局中浮动还在起作用，大概率是父容器没正确应用
display: flex，检查 computed styles 确认
为什么 clear: both 加在下一个兄弟元素上不好使
因为 clear 的作用是“避开前面的浮动”，不是“包裹浮动”。把它加在浮动元素之后的兄弟块上，只能让那个兄弟自身下移，父容器依然塌陷。
常见错误写法：
<div class="float-left">左浮</div> <div class="float-right">右浮</div> <div style="clear: both">这个 div 下移了，但上面两个的父容器还是没高度</div>
-
clear解决的是兄弟元素之间的垂直位置冲突，不是父子包含关系 - 真正要修复的是父容器的 BFC 状态，不是给后面元素“打补丁”
- 这种写法会让 HTML 结构和 CSS 耦合变紧，后续删掉最后一个元素就又出问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
