绝对定位和固定定位会使元素脱离文档流，导致浮动失效；相对定位则保留浮动效果。因此，position: absolute或fixed时，float属性不起作用，元素按定位规则布局；而position: relative时，浮动仍可正常参与排版，适合微调位置。合理搭配可避免布局错乱。
在CSS布局中，浮动（float）和定位（position）是两种常用的元素排布方式。当它们同时作用于同一个元素时，定位会显著影响浮动元素的布局行为。理解它们之间的关系，有助于避免常见的布局问题。
绝对定位脱离文档流，忽略浮动
当一个浮动元素设置为 position: absolute; 时，它会完全脱离正常的文档流，不再占据原来的空间，其父元素或兄弟元素将无视它的存在。
- 即使该元素原本设置了 float: left 或 float: right，绝对定位后浮动效果失效。
- 元素的位置由最近的已定位祖先元素决定，而不是跟随正常流或围绕文本排列。
- 此时，其他浮动元素会像它不存在一样重新布局。
固定定位同样脱离文档流
使用 position: fixed; 的元素也会脱离文档流，与绝对定位类似，浮动属性不再起作用。
- 元素相对于视口定位，滚动页面时保持位置不变。
- 原始的浮动布局会被打破，周围内容不会围绕它排列。
- 常用于导航栏、悬浮按钮等场景，需注意其对原有浮动结构的影响。
相对定位不脱离文档流，保留浮动效果
当元素使用 position: relative; 时，它仍处于正常文档流中，原有的浮动行为依然有效。
立即学习“前端免费学习笔记（深入）”；
- 元素可以相对于自身原始位置偏移，但不会影响其他浮动元素的整体布局。
- 若该元素是浮动的，它仍然会影响后续浮动元素的排列顺序和换行。
- 适合微调浮动元素的位置而不破坏整体结构。
静态和默认定位下的浮动正常工作
默认的 position: static; 不会产生定位偏移，此时 float 属性完全生效。
- 元素按正常浮动规则向左或向右靠齐，文本内容环绕其周围。
- 多个浮动元素依次排列，直到空间不足则换行。
- 这是传统多列布局的基础方式，兼容性好但需注意清除浮动。
基本上就这些。关键在于：一旦元素被设置为绝对或固定定位，浮动就失效了；而相对定位下，浮动仍可正常参与布局。合理组合使用，才能实现预期的页面效果。
