不能真正清除浮动，因其仅强制换行而未恢复文档流，且该属性已被HTML5废弃，现代浏览器兼容性差、行为不一致；浮动父容器高度塌陷的根本原因是浮动元素脱离文档流，须通过触发BFC（如display: flow-root）解决。
br.clear 为什么不能真正清除浮动
用 <br clear="all"> 清除浮动，表面上元素位置“正常”了，但这是靠强行换行顶开的假清除，浮动元素依然脱离文档流，后续布局仍可能错乱。这个属性早已被 HTML5 废弃，现代浏览器虽部分兼容，但行为不一致——比如在 Firefox 中 clear="all" 实际只认 clear="both"，而 Safari 可能直接忽略。
常见错误现象：<br clear="all"> 后父容器高度还是塌陷、兄弟元素被遮挡、响应式断点下突然错位。
-
clear是 CSS 属性，不是<br>的合法 HTML 属性（HTML5 中已移除） - 即使渲染生效，它只影响
<br>所在行的换行逻辑，对父容器的 BFC 触发、高度计算毫无帮助 - 语义混乱：
<br>本意是换行，不是布局控制，混用会加大维护成本
float 元素父容器高度塌陷的真正原因
浮动元素脱离普通文档流，父容器在计算高度时“看不见”它们，导致高度坍缩为 0。这不是 <br> 能解决的问题，而是文档流和格式化上下文层面的机制问题。
典型使用场景：导航栏用 float: left 排列 <li>，但包裹它的 <ul></ul> 高度为 0，背景色消失、边框不显示、后续内容上移。
立即学习“前端免费学习笔记（深入）”；
- 触发 BFC（Block Formatting Context）才是治本之策，比如给父容器设
overflow: hidden、display: flow-root或float自身 -
display: flow-root是目前最干净的方案，专为此设计，无副作用，兼容性到 Chrome 58+/Firefox 53+ - 避免用
overflow: hidden——如果子元素有position: absolute或需要溢出展示（如下拉菜单），会被意外裁剪
现代清除浮动的三种可靠写法
不用 <br>，也不依赖伪元素 hack，直接用 CSS 布局机制解决问题。
- 首选：
display: flow-root—— 给浮动元素的直接父容器设置，简洁、语义明确、无副作用 - 兼容旧版：
overflow: auto或overflow: hidden（注意上面提到的裁剪风险） - Flex/Grid 替代方案：把父容器设为
display: flex或display: grid，浮动本身即失效，自然无需清除
示例：
.nav {
display: flow-root; /* 一行解决，不用 br，不用 after */
}
.nav li {
float: left;
}
为什么 clear:both 伪元素方案也过时了
像 .clearfix::after { content: ""; display: table; clear: both; } 这类方案，本质是用伪元素制造一个“看得见”的块级占位符来触发清除。它有效，但属于补丁式思维。
容易踩的坑：display: table 会引入匿名表格盒、影响垂直对齐；content: "" 在某些屏幕阅读器中可能被误读；而且所有需要清除的容器都得加 class，违反关注点分离。
-
display: flow-root是 CSS 标准中明确定义的 BFC 触发方式，比 hack 更底层、更稳定 - 如果项目需支持 IE11，
flow-root不可用，此时才考虑overflow: hidden或 Flex 替代，而不是回头用<br clear> - 伪元素方案里
clear: both本身没问题，但把它塞进<br>就彻底错了——clear只对块级元素生效，<br>是行内元素
复杂点在于：清除浮动不是独立技巧，它暴露的是对文档流、BFC、display 类型之间关系的理解偏差。很多人卡在“怎么让父容器包住子元素”，却没意识到问题源头是“浮动让子元素离开了流”。盯着 <br> 加属性，不如花两分钟查查 display 值表。
