在前端布局的日常工作中，浮动和定位是两种最常用的布局工具。理解它们的原理、场景与实现方式，能帮助开发者快速做出可维护的布局选择。本指南从实际场景出发，带你把两者的优缺点落地到实现细节。
场景导览：浮动与定位各自的适用情境
浮动的典型场景
当需要让文本环绕图片、或在同一行内排布若干小块时，浮动提供了直接的解决方案。通过设置 float: left 或 float: right，元素可脱离标准文档流，紧贴边缘实现自适应文本环绕。
在实际页面中，常见做法是为图片设置浮动，随后的段落会自动围绕图片排版。此时要注意父容器高度，避免后续元素塌陷，需要使用clearfix技巧或其他清除浮动的方法。
示例要点：文本环绕、图片浮动、清除浮动。下面给出一个简化示例。
这是环绕图片的文本段落……
clearfix 的作用是让父容器在子元素浮动后重新包裹高度，避免布局崩塌。
/* 简单 clearfix 示例 */
.clearfix::after { content: ""; display: block; clear: both; }
/* 应用：容器需要同时包含浮动子元素时生效 */
定位的典型场景
如果需要将元素相对于一个包含块进行精确定位、覆盖或悬停提示，定位提供了强大的控制力。通过设置 position: relative 给包含块，以及 position: absolute 的子元素，可以实现悬停菜单、气泡提示、覆盖层等效果。
定位还用于创建固定在视窗内的导航栏、模态对话框等场景。此时，要关注堆叠上下文和层级关系，避免覆盖冲突与滚动行为的错位。
下面给出一个简单的定位例子，展示绝对定位在容器内的应用要点。
/* 容器作为包含块 */
.container { position: relative; height: 200px; }
.tooltip { position: absolute; top: 8px; right: 8px; }/* 这段将帮助你理解包含块与定位目标之间的关系 */
实现原理揭秘：从布局模型到实际效果
定位模型的核心要点
在定位布局中，包含块决定了绝对定位元素的参照边界。通过为父元素设置 position: relative，可以确保子元素的 position: absolute 参照该父元素，而不是文档流的其他区域。
此外，静态定位（默认）不参与布局；相对定位（position: relative）会在原位置产生偏移，同时为绝对定位子元素提供包含块。
值得关注的还有 z-index 与堆叠上下文，它影响同一区域内元素的遮挡关系，尤其在模态、悬浮层等场景尤为重要。
/* 绝对定位示例 */
.parent { position: relative; }
.child { position: absolute; top: 0; left: 0; }
浮动的实现要点与常见陷阱
浮动的实现要点包括：脱离文档流、文本的环绕行为以及父容器的高度管理。因为浮动子元素不占据常规文档流，父容器需要通过 clearfix 或新的布局模型来回填高度。
一个常见陷阱是图片与文本间的空白和 margin collapse 问题，适当使用 margin 与 padding 分离内容区域，可以避免布局跳动。
/* 简单清除浮动的 CSS 示例 */
.clearfix:after { content: ""; display: table; clear: both; }
/* 应用于容器： ... */
栈模式与布局预演
在组合布局时，浮动与定位往往需要混用以实现复杂效果，例如：左侧浮动图片，右侧固定宽度的信息块，同时内部的提示框使用绝对定位进行覆盖。
信息块提示
从场景到实现的实用指南
遇到文本环绕时的做法
当页面需要让文本绕着图片流动时，先考虑 图片浮动，随后确保文本段落具备足够的内边距与边距，以避免紧贴边缘导致阅读体验下降。
步骤要点：设置浮动、处理图片高度、测试不同分辨率的效果。
/* 文本环绕的简化示例 */
img.note { float: left; margin: 0 12px 12px 0; width: 180px; height: auto; }
p { overflow: hidden; } /* 避免父容器塌陷的替代方案之一 */
混合使用浮动与定位的策略
在复杂布局中，单一技术往往无法满足需求。此时，混合使用浮动与定位可以实现多列排布、图片-文字并行以及悬浮控件等多种效果。
策略要点包括：先用 float 布局主区域，再对需要覆盖的部分使用 position: absolute，并保证包含块的定位上下文正确。
/* 混合布局示例：左浮动图片 + 右侧定位覆盖的消息框 */
.container { position: relative; overflow: hidden; }
.image { float: left; width: 220px; margin-right: 16px; }
.message { position: absolute; top: 8px; right: 8px; width: 180px; background: #fff; box-shadow:0 2px 6px rgba(0,0,0,.15); }
