浮动布局核心优点是支持图文环绕与多栏布局、兼容性好、无间隙问题；缺点是脱离文档流致高度塌陷、易卡住、DOM结构耦合高；清除方式含伪元素法、overflow触发BFC、额外标签法及display:flow-root。
浮动布局的核心优点
浮动最初是为图文环绕设计的，后来被广泛用于多栏布局。它能让块级元素水平排列，比如导航菜单、商品列表或左右分栏结构。兼容性极好，从 IE6 到现代浏览器都支持，不需要额外 polyfill。浮动后的元素可以设置宽高，且默认宽度由内容决定，比纯 inline-block 更可控——没有换行符或空格导致的间隙问题。多个浮动元素会自动从左到右（或右到左）排列，父容器宽度不足时还会自动换行。
浮动布局的主要缺点
最典型的问题是脱离文档流：浮动元素不再占据原来的位置，导致父容器无法被撑开，出现高度塌陷。后续非浮动元素会“上移”填补空位，可能被遮盖或错位。多个浮动元素高度不一致时，容易出现“卡住”现象——比如左边浮一个高 div，右边浮一个矮 div，下一行的浮动元素会被左边那个“拦腰截断”。另外，DOM 结构必须配合浮动方向调整，例如右浮动元素要写在中间内容之前，否则会掉到下一行，可维护性差。
清除浮动的常用方式
解决高度塌陷，关键在于让父容器“感知”到浮动子元素的存在。常见方法有：
-
伪元素法：给父容器添加
::after伪元素，设置content: ""、display: table或clear: both，推荐写法简洁且无冗余标签 -
overflow 触发 BFC：给父容器设
overflow: hidden或overflow: auto，强制创建块级格式化上下文，自然包裹浮动子元素 -
额外标签法：在浮动元素末尾加一个空
<div style="clear:both"></div>，简单但污染 HTML 结构 -
display: flow-root：现代方案，直接给父容器设
display: flow-root，既创建 BFC 又不影响其他样式，语义清晰
和其他传统布局方式的对比
相比绝对定位，浮动仍保留在文档流附近，能响应内容变化；而绝对定位完全脱离流，需手动计算位置，不适合内容动态伸缩的场景。相比 inline-block，浮动没有空白间隙，且支持单侧对齐（如只 float: left），灵活性更高。但它不像 flex 或 grid 那样原生支持垂直居中、等分布局或响应式重排，属于“用技巧凑效果”的过渡方案。现在新项目已不推荐主用浮动做整体布局，但在兼容旧系统或微调图文混排时仍有实用价值。
立即学习“前端免费学习笔记（深入）”；
