浮动本为图文环绕设计，非布局工具；用其做多栏布局必致高度塌陷，清除浮动实为选错方案的警示。
浮动本身不是布局工具，它是为图文环绕设计的；用它做多栏布局，就注定要面对高度塌陷——清除浮动不是补救手段，而是你选错方案的提示。
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避免空标签带来意外高度 - 必须同时写
content: ""和display: table，缺一不可；只写content伪元素不参与布局 - IE8 支持单冒号写法：
.clearfix:after，双冒号::after在 IE8 及更早版本不识别 - 现代项目可省略
*zoom: 1，但若需支持 IE7，必须加上以触发 hasLayout - 别漏掉
::before声明（哪怕内容为空），否则某些场景下顶部 margin 会折叠 -
overflow: hidden简单粗暴，但任何溢出内容（如position: absolute下拉菜单、阴影、transform 位移）都会被裁剪 -
display: flow-root是专为此类问题设计的新值，无裁剪风险，Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 全支持 - 移动端 Safari 对
overflow: hidden+position: fixed组合存在滚动异常，flow-root无此问题 - 如果父容器本身需要滚动（比如卡片列表），
overflow: hidden直接不可用，flow-root无影响
clearfix 伪元素法为什么推荐 display: table
用 ::after 插入清除节点时，display: table 比 display: block 更稳妥，因为它天然触发 BFC，且不会继承父级 line-height 导致额外空白。
overflow: hidden 和 display: flow-root 的取舍
两者都靠触发 BFC 包裹浮动子元素，但副作用天差地别。
真正容易被忽略的是：float 布局一旦出现清除需求，说明你已经在用过时范式解决本不该存在的问题——现代项目里，display: flex 或 display: grid 才是默认选项，它们从根源上消除了高度塌陷。
