float固定宽度布局仍值得用，因其在后台管理页侧边栏+主内容区等场景下最轻量且IE8+兼容性最佳；需手动处理高度塌陷与响应式降级，推荐伪元素清除浮动，主内容用margin-left避让定宽侧栏而非calc()，IE6兼容需注意zoom:1与空白节点问题。
float固定宽度布局为什么现在还值得用
它不是过时方案，而是特定场景下最轻量、兼容性最好的选择——比如后台管理页的侧边栏+主内容区，或者老项目维护中需要最小改动实现响应式降级。
关键不在“能不能”，而在“要不要”。float本身不处理高度塌陷，也不自动响应宽度变化，所以必须手动补全这两块。
- 定宽侧栏 + 自适应主内容区是最典型用法，侧栏用
width写死（如200px），主内容用margin-left避开它 - IE8+完全支持，不需要Flex或Grid的polyfill
- 如果父容器没清除浮动，会看到后续元素上移、背景丢失、边框错位等现象，这不是bug，是
float的自然行为
清除浮动的三种写法怎么选
不清理，布局就垮。但clear: both加在哪、怎么加，直接影响可维护性。
- 在浮动元素后面加一个空
<div style="clear:both"></div>：简单直接，但污染HTML结构，后续加新模块容易漏掉 - 给父容器加
overflow: hidden：有效，但会意外裁剪position: absolute子元素或阴影效果 - 用伪元素清除（推荐）：
.container::after { content: ""; display: table; clear: both; }——不改HTML，不影响溢出，所有现代浏览器和IE8+都认
定宽+float后主内容宽度怎么算才不重叠
很多人写width: calc(100% - 200px)结果还是压到侧栏上，问题往往出在盒模型和边距叠加。
立即学习“前端免费学习笔记（深入）”；
- 确保主内容区域没有
float，否则它也会脱离文档流，margin-left就失效 - 侧栏设
float: left; width: 200px;，主内容设margin-left: 200px;，比calc()更稳——不用管padding/border是否包含在width里 - 如果主内容内部有
padding，别忘在margin-left基础上再加，否则视觉上还是贴太近 - 避免给主内容设
width: 100%，它会撑满父容器再减去margin，极易溢出
IE6/7里float常见错位怎么快速定位
不是所有错位都要兼容，但如果必须支持，90%的问题来自三类：
-
display: inline被IE6双倍间距bug影响：给浮动元素加display: inline可临时修复，但本质是触发了hasLayout，更稳妥是加zoom: 1 - 父容器没设
width：IE6下浮动子元素可能“挤”出父容器，给父容器显式设width或zoom: 1 - 注释或空格被解析为文本节点：IE6会把它当行内元素参与换行，删掉浮动元素之间的换行符或用
<!-- -->包住空白
真要保IE6，建议把整个浮动区块包进zoom: 1容器里，比逐个修更省事。不过现在多数项目，检查下UA再决定是否加载兼容样式更实际。
