浮动布局失效的根本原因是未触发bfc且未清除浮动影响：父容器需设overflow:hidden/auto防塌陷，右侧自适应区应设overflow:hidden而非float或calc()，清除浮动须用伪元素clearfix而非错误位置的clear:both。
浮动布局为什么突然不生效了
现代浏览器里直接写 float: left 却发现元素堆叠、父容器高度塌陷、文字环绕错乱——不是你写错了，是浮动本身没触发 BFC，也没清除后续流的影响。
常见错误现象：div 设了 float: left，但后面兄弟元素“跑上来”盖住了它；父容器在开发者工具里显示高度为 0px。
- 必须给浮动元素的父容器设置
overflow: hidden或overflow: auto（触发 BFC），否则高度塌陷不可避免 - 不要依赖
float做整页主结构——它本意是让文字绕排图片，不是做栅格系统 -
display: inline-block或flex在同样场景下更可控，尤其当需要响应式或垂直居中时
两栏布局：左侧定宽 + 右侧自适应的可靠写法
想让左边 200px 固定导航、右边填满剩余空间，用浮动最容易踩坑的是右侧内容宽度计算和清除逻辑。
- 左侧元素设
float: left; width: 200px;，右侧元素**不设 float**，只加overflow: hidden;（这是关键！靠触发 BFC 实现“自动避开浮动区域”） - 别给右侧设
width: calc(100% - 200px)——IE9+ 才支持，且一旦父容器 padding 不为 0 就偏移 - 如果右侧要内边距，直接在内部子元素上设
padding，别动外层容器的width
<div class="container">
<div class="aside">导航</div>
<div class="main">内容区</div>
</div>
<p>.aside { float: left; width: 200px; }
.main { overflow: hidden; } /<em> 不要 float，不要 width </em>/三栏布局：中间自适应 + 两侧固定宽度的浮动陷阱
经典圣杯/双飞翼布局用浮动实现，但实际项目中 90% 的失败源于 HTML 结构顺序和清除时机不对。中间栏必须写在 HTML 最前面，否则无法优先占据文档流中心位置。
- HTML 顺序必须是：
<main></main>→<aside-left></aside-left>→<aside-right></aside-right>，否则浮动后无法“挤”出中间空隙 - 左右栏用
float: left/right+width，中间栏不设 float，靠margin撑开空间（如margin: 0 200px） - 父容器必须有
padding包裹两侧栏，否则它们会脱离父容器边界（浮动脱离文档流） - IE8 及以下需额外处理 min-width 和 box-sizing，现代项目建议直接跳过浮动改用
display: flex
浮动清除不彻底导致的换行错位
用了 clear: both 还是出现下一行元素紧贴浮动块底部？大概率是清除位置放错了——clear 清除的是“前面”的浮动，不是“里面”的。
立即学习“前端免费学习笔记（深入）”；
-
clear: both必须加在**需要换行的下一个兄弟元素上**，而不是浮动元素自己身上 - 更稳妥的方式是用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，然后给父容器加class="clearfix" - 避免用
<div style="clear:both"></div>—— 多余 DOM 节点，语义差，还可能被 CSS 重置影响 - 注意：Flex/Grid 容器内的子元素设
float会被忽略，清除也无效——浮动和新布局模型不兼容
浮动不是过时，而是适用边界非常窄：仅适合图文混排、小图标对齐这类轻量级场景。一旦涉及响应式、垂直对齐、等高列或多端适配，立刻转向 flex 或 grid。很多人卡在“能跑就行”，结果改个 margin 就全乱，其实是底层模型选错了。
