浮动布局必须解决高度塌陷问题，因浮动元素脱离文档流导致父容器高度为0；推荐使用clearfix伪元素或display: flow-root清除，现代布局应优先选用Flexbox或Grid。
浮动布局必须解决高度塌陷问题
所有浮动子元素的父容器，只要没设固定高度，几乎必然出现 height: 0，背景、边框、内边距全部失效，后续元素直接顶上来。这不是“偶尔出错”，而是浮动机制的必然结果：浮动元素脱离文档流，父容器无法感知其尺寸。
- 别指望
overflow: hidden一劳永逸——它会意外裁剪position: absolute子元素，比如下拉菜单、弹层 - 伪元素清除法最稳妥：
.clearfix::after { content: ""; display: table; clear: both; }，display: table比block更兼容旧版 IE - 现代项目可直接用
display: flow-root，语义清晰、无副作用，但注意 IE 完全不支持，Safari 10.1+ 起可用
float:left 和 float:right 混用时的排列逻辑
同方向浮动会自动并排，但 left 和 right 混用时，它们各自向两端“挤”，中间留空——不是你想要的左右分栏，而是两个元素分别贴边，中间可能大片空白，且后续非浮动元素会卡在它们之间的缝隙里。
- 两栏布局务必统一方向：
float: left配合宽度控制（如width: 25%+width: 75%），而非一个 left 一个 right -
clear: both不是加在浮动元素自己身上，而是加在需要“换行”的下一个兄弟块上；加错位置等于没清 - 浮动元素默认收缩为内容宽，必须显式设置
width，否则多列布局极易因内容长度差异导致错行
为什么 float 不该用于现代主布局
浮动本质是图文环绕工具，不是为复杂页面结构设计的。当你开始写 margin-right 对齐、用 clear 补位、反复调试换行点，就说明它正在反噬开发效率。
- Flexbox 替代浮动做横向排列：
display: flex+justify-content一行代码解决对齐、间距、换行控制 - Grid 替代浮动做二维布局：
grid-template-columns: 200px 1fr直接定义轨道，无需计算浮动宽度与 margin - 唯一还值得用 float 的场景：旧项目兼容性兜底、极简图文环绕（如文章内图片右置+文字环绕）
清除浮动后仍错位？检查这几个隐性条件
加了 clearfix 还塌陷，或元素莫名偏移，大概率不是清除失败，而是被其他规则干扰。
立即学习“前端免费学习笔记（深入）”；
- 父容器有
padding但没包含在 box-sizing 里，实际宽度超限导致最后一列换行——统一写box-sizing: border-box - 浮动元素设置了
vertical-align或line-height，影响行框基线，引发垂直错位 - 父容器本身也设置了
float，形成嵌套浮动，清除逻辑失效——父容器不该浮动
