不推荐用 float 做响应式分栏——因其本质是图文环绕而非布局工具，易致父容器塌陷、重排抖动、换行异常、脱离文档流引发 margin 合并失效等问题，且与现代 CSS（flex/grid）及动态组件混用时副作用不可控。
用 float 做响应式分栏，现在不推荐——它能跑通，但会踩坑无数，尤其在现代设备和嵌套结构里。
为什么 float 在响应式场景下容易出问题
float 本质是为图文环绕设计的，不是为布局；它会让父容器“塌陷”，必须手动清除（比如加 .clearfix:after 或 overflow: hidden），否则高度丢失、背景不显示、后续元素错位。媒体查询中反复切换 float: left/float: none 时，还容易触发重排抖动，尤其是 iOS Safari 下表现不稳定。
- 移动端竖排时，
float: left和float: right仍会试图横向挤占空间，导致内容被截断或换行异常 - 没有原生的“换行控制”机制，
clear: both写错位置就会让下一栏卡在上一栏末尾 -
float元素脱离文档流，margin合并、vertical-align失效、flex/grid 子项内混用会直接失效
如果非要用 float，至少守住这三条底线
老项目维护或兼容 IE8–9 时可能绕不开，但必须严格约束写法：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有浮动元素必须有明确宽度（如
width: 30%），不能依赖auto，否则在不同视口下行为不可控 - 父容器必须带
.clearfix类，且该类要包含display: table或zoom: 1（IE 兼容）+:after伪元素清除，光靠overflow: hidden在某些安卓 WebView 里会裁剪子元素 - 媒体查询中改
float，必须同步重置width和clear：比如@media (max-width: 768px) { .left { float: none; width: 100%; clear: both; } }
float + 媒体查询的典型错误写法
常见翻车点集中在“只改 float，不调 width”或“忘记清除”：
立即学习“前端免费学习笔记（深入）”；
.sidebar { float: right; width: 25%; }
.main { float: left; width: 75%; }
/* 错误：下面这段没清浮动，也没设 width，移动端直接叠在一起 */
@media (max-width: 600px) {
.sidebar, .main { float: none; }
}
/* 正确补丁 */
@media (max-width: 600px) {
.sidebar, .main { float: none; width: 100%; clear: both; }
.container { overflow: hidden; } /* 或插入 .clearfix */
}真正麻烦的不是写法本身，而是当页面里混入了 position: absolute、transform 或现代组件（比如 Vue 的 v-if 切换），float 的副作用会突然爆发——比如某天发现侧边栏在 iPad 上消失了，查半天才发现是某个第三方弹窗 JS 动态加了 overflow: hidden 到 body 上，把浮动容器一起裁掉了。
