clear:both仅在浮动导致内容塌陷、错位或父容器高度塌陷时必需，用于让元素避开上方左右浮动框；现代方案优先选用display:flow-root或Flex/Grid布局。
clear:both 什么时候必须用
当浮动元素导致后续内容塌陷、错位或父容器高度塌陷时，clear:both 才是必要解法。它不是“清除所有浮动”的万能开关，而是告诉浏览器：“这个元素不能紧贴着上面任何方向的浮动框”。常见于导航栏（float:left）后面紧跟正文、卡片列表末尾加页脚这类场景。
容易踩的坑：
• 直接给父容器加 clear:both —— 无效，因为 clear 只对自身生效，不作用于子元素
• 在浮动元素自己身上加 clear:both —— 会把它往下推一截，破坏原有布局意图
• 用在非块级元素上（比如 <span></span>）—— 大部分浏览器忽略，因为 clear 只对 display: block 或 table 等可换行元素起效
替代 clear:both 的现代写法更可靠
clear:both 是为解决老式浮动布局的副作用而生，现在有更干净的方案：
- 给父容器设
display: flow-root—— 最轻量，兼容性到 Chrome 64+/Firefox 58+，不改变文档流，自动包含浮动子项 - 用
overflow: hidden或overflow: auto—— 兼容性好，但可能意外裁剪阴影、下拉菜单或固定定位内容 - Flex 或 Grid 布局直接取代浮动 —— 比如把导航栏改成
display: flex，就根本不需要clear
注意：display: flow-root 和 overflow 都是触发 BFC（块级格式化上下文），这才是真正“包裹浮动”的原理，而 clear 只是位置规避。
立即学习“前端免费学习笔记（深入）”；
clear:both 的取值差异和实际效果
clear 属性有四个合法值：left、right、both、none（默认）。关键不是“清什么”，而是“避开谁”：
-
clear: left→ 该元素的上边界不能低于前面任意float: left元素的下边界 -
clear: right→ 同理，只避开右浮动 -
clear: both→ 同时避开左右浮动，最常用，但别滥用 -
clear: none→ 显式取消继承来的 clear，少见但有用，比如重置某个组件内的清除行为
性能上没差别，但语义更精确有助于协作维护。例如侧边栏右浮动，主内容区只需 clear: right，而非盲目写 both。
为什么 clear:both 经常“不起作用”
典型现象：写了 clear:both，页面没变化，或者只在部分浏览器生效。原因往往不是语法错，而是：
- 目标元素没有生成块级框 —— 检查是否被设成
display: inline或display: flex（后者忽略clear） - 浮动元素和清除元素不在同一 BFC 内 —— 比如父容器用了
transform，会创建新 BFC，导致clear失效 - CSS 优先级被覆盖 —— 某个更高权重要求里写了
clear: none，或者用了!important冲突 - HTML 结构断层 —— 清除元素和浮动元素中间插了
position: absolute或display: contents的节点，视觉上“看不见”，但逻辑上打断了清除链
调试建议：用浏览器开发者工具检查计算样式里的 clear 是否为 both，再看该元素的 display 和 position 值。
浮动布局本身已经过时，clear:both 是它的补丁，不是设计原语。真正容易被忽略的是：它只解决“位置冲突”，不解决“语义混乱”——比如用浮动做多列布局，屏幕阅读器和打印样式依然按 HTML 顺序读取，跟视觉完全不一致。
