浮动不是布局工具而是图文环绕方案；用它做多栏布局必然导致高度塌陷，清除浮动实为选错方案的警示。
浮动本身不是布局工具，它是为图文环绕设计的；用它做多栏布局，就注定要面对高度塌陷——清除浮动不是补救手段，而是你选错方案的提示。
float:left 和 float:right 实际怎么起作用
设置 float: left 后，元素会向左移动，直到碰到父容器左边缘或前一个浮动元素的右边缘；float: right 同理向右。关键点在于：它脱离标准文档流，但**仍参与行框（line box）计算**，所以文字能绕排，而兄弟块级元素却“看不见”它。
- 浮动元素的顶边不能高于上一个浮动元素的顶边（即使中间有空隙）
- 非浮动的块级兄弟元素会“上升”去填补浮动元素原本占位，造成视觉错位
-
float: none是默认值，显式写上仅用于覆盖继承或重置 - 不要给父容器自己设
float，否则它也脱离文档流，问题下移
clear:both 为什么总加不对位置
clear: both 不是“清除父容器的浮动”，而是让**当前元素的外边距避开前面所有浮动元素**。它只对自身生效，且必须作用在浮动元素的**后续兄弟元素**上，否则无效。
- 写在浮动元素自己身上：
<div style="float:left; clear:both"></div>—— 没用，它不撑父容器 - 写在父容器上：
<div style="clear:both"><div style="float:left"></div></div>—— 没用，clear不作用于子元素 - 正确位置：
<div style="float:left"></div> <div style="clear:both"></div>，且该<div> 必须是最后一个浮动子元素的直接后续兄弟 <li>建议加 <code>height: 0; font-size: 0; overflow: hidden避免空标签带来意外高度 - 推荐写法：
.clearfix::after { content:""; display: table; clear: both; } -
::after要和::before配合用，前者防顶部margin折叠，后者负责清除；但现代项目可只用::after，前提是父元素无margin-top问题 - 兼容 IE8+：用单冒号写法
:after，避免双冒号在旧引擎失效 - 无需
height、visibility等冗余声明 - 会裁剪任何溢出内容（比如下拉菜单、tooltip、负
margin拉伸、position: absolute超出父边界的部分） - 配合
width使用时，在 IE6/7 中需加*zoom: 1，否则仍塌陷 - 若父容器本身有滚动需求（如卡片列表带横向滚动），
overflow: hidden会直接禁用滚动 -
display: flow-root是未来标准解（Chrome 64+/Firefox 58+/Safari 15.4+ 支持），它只创建新 BFC，不干扰溢出行为
clearfix 伪元素法怎么写才真正生效
常见错误是只写 content: "" 却漏掉 display，导致伪元素不参与布局，clear 形同虚设。标准写法必须包含：display: table（比 block 更稳，天然触发 BFC 且不继承 line-height）。
overflow: hidden 和 display: flow-root 的实际取舍
overflow: hidden 通过触发父容器 BFC 来包含浮动子元素，原理正确，但副作用明显。
真正容易被忽略的是：很多团队一边写 float 布局，一边机械套用 clearfix，却没意识到这已是在用过时范式解决本不该存在的问题——清除浮动本身，就是个信号：你可能正在用错工具。
