在 CSS 布局中，display、float 和 position 这三个属性之间存在怎样的相互作用与优先级关系？请说明它们各自的作用以及搭配使用时的影响。

回答思路

1. 【回答框架 1】display 决定元素是否生成及如何生成盒子，如 block、inline、inline-block、flex 等，它会影响元素默认的布局行为。float 使元素脱离文档流向左或向右浮动，常用于实现图文环绕或横向排列。position 则通过 relative、absolute、fixed 等定位方式控制元素相对于包含块的位置。
2. 【回答框架 2】三者之间存在优先级和相互影响。当 position 为 absolute 或 fixed 时，float 的计算值被视为 none，即定位元素不会浮动。而 float 元素会生成块级盒子，display 值会有所调整，例如 inline 元素浮动后自动变为 block 类似的表现。另外，position: relative 不会影响浮动的行为，但仍会按文档流正常位置偏移，absolute 和 fixed 则完全脱离文档流，与 float 不再共同作用。
3. 【回答框架 3】在布局实践中，需要根据场景选择属性。若仅需文本环绕或横向排列，可使用 float；若需相对定位微调，可用 position: relative 搭配偏移量；若需将元素从文档流中抽出并定位到特定位置，则用 absolute 或 fixed。同时，现代 CSS 更推荐使用 flexbox 或 grid 来替代多数 float 布局，因为它们更简洁且可控。
4. 【回答框架 4】理解这三者的关系有助于避免常见布局问题，如父容器高度塌陷、元素重叠或位置意外偏移。需要明确 float 元素虽然脱离文档流但仍占据自身位置的空间，而绝对定位元素完全不占空间，这导致后续元素位置变化不同。掌握这些差异，能更准确地预测布局结果。
5. 【关键点 1】position 为 absolute 或 fixed 时，float 属性失效，视为 none。
6. 【关键点 2】float 会使元素脱离普通文档流，但保留自身空间，绝对定位则完全脱离且不占空间。
7. 【关键点 3】position: relative 不影响元素在文档流中的原始位置，仅产生视觉偏移，与 float 可叠加使用。
8. 【关键点 4】display、float、position 共同决定盒子的生成和定位方式，其中 position 的优先级最高，其次为 float，最后为 display 的某些调整。
9. 【关键点 5】现代布局中，flex 和 grid 在多数场景可替代 float 实现更可靠的对齐和分布。
10. 【易错点 1】不要混淆 position: relative 与 absolute 的包含块关系，relative 仍以自身原位置为基准，absolute 以最近定位祖先为基准，若无则视为初始包含块。
11. 【易错点 2】float 左浮动或右浮动会影响外层容器的高度计算，需要清除浮动，否则出现塌陷。
12. 【易错点 3】设置 float 后，元素的 display 值会计算为 block 或 table 等，若直接覆盖 display 属性为 inline，可能无效或产生异常表现，需注意层叠关系。