浮动布局已不用于主页面结构，但理解它对兼容IE8–9、排查老项目仍有必要；其核心是元素脱离文档流后文字绕行而块级元素无视占位，需处理塌陷并用伪元素等清除浮动。
浮动布局现在基本不用于主页面结构，但理解它对排查老项目、兼容 IE8–9 或阅读遗留代码仍有必要。直接用 float 实现多栏，必须同步处理高度塌陷和清除逻辑，否则父容器会“看不见”子元素。
float:left 和 float:right 的实际行为
设置 float: left 后，元素会脱离文档流，向左贴边，直到碰到父容器左边界或前一个浮动元素；float: right 同理向右。关键点在于：浮动元素之后的**普通块级元素会无视它占位，但行内内容（如文字）会绕开它**。
- 常见错误现象：
div浮动后，其父容器高度变成 0（即“塌陷”），背景色/边框消失 - 使用场景：图文环绕、旧式两栏导航+内容、简单横向排列（无响应需求）
- 注意：
float只对设置了明确宽度的块级元素生效；display: inline元素设float会自动转为block
清除浮动的三种可靠写法
清除浮动不是“取消 float”，而是让后续元素不再被浮动影响。最常用且兼容性好的是伪元素 + clear: both，而不是在 HTML 里硬加空 div。
-
.clearfix::after { content: ""; display: table; clear: both; }—— 推荐，语义干净，IE8+ 支持 -
.parent { overflow: hidden; }—— 简单但有副作用：溢出内容会被裁剪，慎用于含下拉菜单或动画的容器 -
<div style="clear: both"></div>—— 直接但污染 HTML，仅适合临时调试或极简 demo
别用 clear: left 或 clear: right 单侧清除，除非你明确知道只有一侧有浮动且另一侧不需要重排。
立即学习“前端免费学习笔记（深入）”；
两栏布局的最小可行代码
以下是一个能跑通、不塌陷、无需额外 JS 的两栏浮动布局，左侧导航宽 200px，右侧内容自适应：
<style>
.layout { zoom: 1; } /* 触发 IE6–7 hasLayout */
.layout::after {
content: "";
display: table;
clear: both;
}
.nav {
float: left;
width: 200px;
background: #eee;
}
.main {
float: left;
width: calc(100% - 200px);
}
</style>
<p><div class="layout">
<div class="nav">导航</div>
<div class="main">内容区</div>
</div>重点：width: calc(100% - 200px) 是为了防止右侧因盒模型（padding/border）导致换行；zoom: 1 是给老 IE 的兜底，现代浏览器可省略。
为什么 float 布局容易出错
根本问题不在语法本身，而在它改变了元素在文档流中的存在方式。一旦嵌套层级变深、或混用 position: relative / margin / inline-block，就极易出现意外交互。
- 浮动元素的
margin在某些情况下会双倍（IE6 的双边距 bug），需加display: inline修复 - 父容器没设
height时，塌陷会导致后续兄弟元素上移，常被误认为“样式没生效” - 响应式断点中，
float无法像flex那样自动换行或反转顺序，必须配合媒体查询重写整个规则
真正需要写浮动时，优先检查是否能用 display: flex 或 display: grid 替代；只有当目标环境明确要求支持 IE9 及以下，才值得投入精力维护浮动逻辑。
