clear: both仅对紧跟浮动后的块级兄弟元素有效，加在浮动元素自身或非块级元素上无效；现代推荐用display: flow-root、overflow: hidden或flex/grid布局替代。
会，而且非常常见——错位不是偶然，是浮动脱离文档流后的必然表现。
为什么浮动会让兄弟元素“上浮”或“偏移”
浮动元素一加上 float: left 或 float: right，就从文档流里“飘”走了。父容器看不见它，后续的兄弟元素（比如 <p></p>、<div>）会当成它不存在，直接去占它原来的位置。
<ul>
<li>块级兄弟元素（如 <code><footer></footer>）可能被“吸”到浮动元素下方，但文字内容仍会绕行，造成视觉割裂
inline-block 兄弟元素（如 <span></span>、未设 display: block 的 <div>）会尝试贴边并排，而不是老老实实换行
<li>如果兄弟元素本身也浮动，那它们会互相“挤”，一旦总宽超 1px 就整行崩掉，错位更难排查</li>
<h3>clear: both 加在哪才真正管用</h3>
<p><code>clear: both 不是万能胶，它只对「紧跟在浮动元素之后」的块级兄弟元素起效。
- ✅ 正确：浮动容器后紧挨着的
<div class="main"> 上加 <code>clear: both - ❌ 错误：加在浮动元素自己身上（
div.float-left { clear: both }），完全无效 - ❌ 错误：加在浮动容器内部的子元素上，或中间隔了其他非浮动元素
- ⚠️ 注意：
clear只影响垂直位置（避开上方浮动），不解决父容器塌陷；兄弟元素位置正常了，父容器可能还是高度为 0 -
display: flow-root：加在浮动元素的**直接父容器**上，专治塌陷，无副作用，Chrome 58+/Firefox 53+ 全支持 -
overflow: hidden：兼容性最好，但会裁剪position: absolute子元素超出部分，加之前先确认有没有弹窗、下拉菜单 - 直接换布局模型：把父容器设成
display: flex或display: grid，子元素天然参与流式计算，float和clear都可以退休
比 clear 更稳的三种实际方案
现代项目中，靠 clear 打补丁容易漏，优先选从根上切断问题的方式：
最容易被忽略的是嵌套层级——外层用了 flow-root，里面某个子模块又单独浮动了一组卡片，那这个子模块的父容器也得单独处理，浮动的影响不会自动穿透。
