浮动元素脱离部分文档流并影响周围内容排列，而绝对定位元素完全脱离文档流、相对于最近已定位祖先定位；2. 混合使用时需明确定位上下文，避免布局错乱；3. 通过设置父容器position: relative、使用clear属性和clearfix技巧可解决冲突；4. 结合float与absolute实现复杂布局时应注意结构清晰与z-index层叠控制。
在网页布局中，浮动（float）和定位（position）常被同时使用。虽然现代开发更推荐 Flexbox 或 Grid，但在维护旧项目或特定场景下，掌握如何用 CSS 控制浮动与定位元素的混合布局仍很实用。
理解浮动与定位的基本行为
浮动元素会脱离正常文档流的一部分，向左或右移动直到碰到容器边缘或另一个浮动元素。而定位元素（如 position: absolute、position: relative）则根据定位上下文进行偏移。
当两者混合使用时，关键在于清楚它们如何影响文档流和彼此的位置关系：
避免浮动与绝对定位冲突
如果一个绝对定位元素出现在浮动元素之后，它可能被“遮挡”或布局错乱，因为绝对定位元素不参与浮动布局。
立即学习“前端免费学习笔记（深入）”；
解决方法是确保绝对定位元素的父容器正确设置定位上下文：
- 给包含绝对定位元素的父级设置 position: relative
- 避免将绝对定位元素直接放在浮动容器内而不控制层级
- 必要时使用 z-index 调整层叠顺序
清除浮动对定位元素的影响
浮动可能导致后续元素布局异常，尤其是非浮动的定位元素。使用 clear 属性可以避免这种问题。
- 在定位元素前添加 clear: both 可防止其被前面的浮动元素“挤上去”
- 使用伪类 ::after 清除浮动（常见于 clearfix 技巧）
结合使用实现复杂布局
有时需要浮动侧边栏 + 绝对定位按钮或提示框。此时结构清晰和定位上下文明确是关键。
- 侧边栏使用 float: left，主内容区用 margin-left 避让
- 主内容中的某个元素需精确定位时，设其父级为 position: relative，内部元素用 absolute
- 注意 overflow 对绝对定位元素的裁剪影响
基本上就这些。只要理清文档流、定位上下文和层叠关系，浮动与定位混合布局也能稳定可控。不复杂但容易忽略细节。
