浮动与定位有何不同？

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《浮动与定位区别解析》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

浮动与定位的核心区别在于对文档流的影响及使用场景。①浮动（float）使元素半脱离文档流，仍影响相邻内容，常用于文本环绕和简单布局，但需清除浮动以解决高度塌陷问题；②定位（position）则让元素完全脱离文档流（如absolute、fixed），实现精确位置控制和层叠效果，适用于弹窗、固定导航等场景；③两者关系在于均用于改变元素位置，但浮动侧重排版，定位侧重精准放置；④在响应式设计中，浮动因复杂布局和顺序控制的局限逐渐被Flexbox和Grid取代，而定位因其固定、叠加和粘性能力仍不可或缺；⑤层叠上下文中，定位可创建新上下文并控制z-index，而浮动无法创建上下文，仅影响平面布局。

CSS中的浮动（float）和定位（position）是两种截然不同的布局工具，它们的核心区别在于对文档流的影响以及元素放置的逻辑。简单来说，浮动主要用于文本环绕图片或创建简单的多列布局，它会使元素脱离正常文档流，但仍会影响其兄弟元素；而定位则是为了实现元素在页面上的精确位置控制，它可以让元素完全脱离文档流，并根据指定的参考点进行偏移。它们的关系在于，都是用来“移动”元素或改变其在页面上呈现方式的手段，但解决的问题和机制完全不同。

解决方案

在我看来，理解CSS浮动和定位，就像理解两种不同的交通工具：浮动像是在现有道路上（文档流）开辟一条支路，让一些车辆（元素）可以绕行，但这条支路依然与主路有千丝万缕的联系，甚至会影响主路上的其他车辆（比如文本环绕）；而定位则更像是一架直升机，它完全无视地面道路（文档流），直接飞到你指定的位置，甚至可以悬停在其他车辆的上方（层叠）。

浮动（Float）

浮动的初衷其实非常朴素，就是为了实现文本环绕图片的效果，就像报纸杂志那样。当你给一个元素设置float: left;或float: right;时，这个元素会从正常文档流中“浮”起来，向左或向右移动，直到碰到父容器的边缘或另一个浮动元素。它虽然脱离了正常流，但仍会占据空间，并且最关键的是，它旁边的行内内容（比如文本）会围绕着它进行排列。

• 影响文档流： 浮动元素会脱离正常流，但其后的块级元素会表现得像浮动元素不存在一样，直接占据浮动元素的位置。而其后的行内元素（如文本）则会围绕浮动元素排列。这常常导致“父元素高度塌陷”的问题，因为父元素不再包含浮动子元素的高度。
• 清除浮动： 为了解决高度塌陷和后续元素布局混乱的问题，我们通常需要“清除浮动”（clear）。这可以通过在浮动元素后添加一个清除浮动的空元素，或者使用BFC（块级格式化上下文）的特性（如父元素设置overflow: hidden;或display: flow-root;）来实现。
• 历史地位： 在Flexbox和Grid出现之前，浮动曾是实现多列布局的“主力军”，但伴随而来的是各种清除浮动的技巧和hack，这让布局变得复杂且难以维护。

定位（Position）

定位则是关于元素在页面上精确位置的控制。它通过position属性来定义元素的定位方式，然后配合top, right, bottom, left这些偏移属性来指定具体位置。

• position: static; (默认值): 元素在正常文档流中，不受top/right/bottom/left影响。
• position: relative; (相对定位): 元素仍在正常文档流中，但可以通过top/right/bottom/left相对于其“正常位置”进行偏移。它偏移后，其在文档流中占据的空间依然保留，不会影响其他元素的布局。相对定位常用于为绝对定位的子元素提供定位上下文。
• position: absolute; (绝对定位): 元素完全脱离正常文档流，不再占据空间。它会相对于其最近的“已定位祖先元素”（即position值不为static的祖先元素）进行定位。如果没有已定位祖先，它将相对于初始包含块（通常是）进行定位。绝对定位的元素可以覆盖其他元素。
• position: fixed; (固定定位): 元素完全脱离正常文档流，不再占据空间。它相对于浏览器视口（viewport）进行定位，这意味着它会随着页面滚动而保持在屏幕上的固定位置，比如常见的顶部导航栏或侧边栏。
• position: sticky; (粘性定位): 这是相对较新的定位方式，可以看作是relative和fixed的结合。元素在达到某个滚动阈值之前表现为relative，一旦达到阈值，就表现为fixed，直到其父容器的边界。

核心区别与关系：

我认为，最根本的区别在于它们对“文档流”的处理方式。浮动是“半脱离”，它改变了自身及其相邻内容的流向，但依然是布局流的一部分；而absolute和fixed定位是“完全脱离”，它们像幽灵一样，不再占据任何空间，完全独立于文档流，只按照给定的坐标和参考系来放置。relative定位则是个异类，它虽然可以偏移，但本质上还是在流中。

它们的关系在于，都是对元素在页面上的“位置”进行操作。但浮动更侧重于内容流的“排版”，而定位更侧重于元素的“精确放置”和“层叠关系”。你不会用浮动来做一个弹窗，也不会用定位来做一段文字的环绕效果。它们是为不同场景设计的工具，各有其不可替代的价值。

为什么说浮动是“历史遗留问题”，而定位依然是不可或缺的？

这确实是一个很有趣的视角。在我看来，“历史遗留问题”这个说法，更多是针对浮动在过去被“滥用”于构建复杂网格布局而言的。浮动的初衷是文本环绕，但在缺乏更强大布局工具的年代，开发者们硬是用它来实现了多列布局。这导致了各种清除浮动的奇技淫巧，以及在响应式设计中维护布局的巨大挑战。当Flexbox和CSS Grid这样的现代布局模块出现后，它们以更语义化、更灵活、更可预测的方式解决了多列和网格布局问题，浮动自然就退居二线，不再是构建复杂布局的首选了。它不是“坏”技术，只是被更优的方案取代了其在“网格布局”上的核心地位。

然而，定位（特别是absolute、fixed和sticky）则完全不同，它们是解决特定UI问题的核心利器，至今仍然不可或缺。

• absolute定位： 你想在图片左上角放一个“新品”的标签？想在输入框旁边放一个清除按钮？想做一个覆盖整个页面的弹窗或者加载动画？这些都需要absolute定位。它允许你将一个元素精确地放置在父元素内部的任何位置，而不用担心它会影响到其他元素的布局。这在实现各种组件内部的微调和叠加效果时，简直是神来之笔。
• fixed定位： 网页的顶部导航栏、侧边栏、返回顶部按钮、底部版权信息条，这些都需要fixed定位。它们需要始终保持在视口的某个位置，不随页面滚动而移动。这是浮动或Flexbox/Grid无法直接提供的能力。
• sticky定位： 这种定位方式更是解决了特定场景下的用户体验痛点，比如滚动到一定位置时，让标题或广告固定在顶部，提供上下文信息。它巧妙地结合了相对定位和固定定位的优点。

所以，浮动更多是“退役”了它在宏观布局上的重任，但它作为文本环绕的原始功能依然存在。而定位，由于其独特的“脱离文档流”和“精确层叠”能力，在微观组件布局、UI叠加效果和视口固定元素方面，依然是不可替代的基石。

浮动和定位在层叠上下文（Stacking Context）中扮演什么角色？

这是个很棒的问题，它触及了CSS布局中一个更深层的概念。简单来说，层叠上下文决定了元素在Z轴（深度）上的堆叠顺序，也就是谁在上面，谁在下面。

在这里，定位扮演了非常关键的角色，而浮动则几乎没有直接作用。

• 定位与层叠上下文的创建：

  • 当一个元素被设置为position: relative;或position: absolute;（以及fixed和sticky）并且你给它设置了z-index值（除了auto），那么这个元素就会创建一个新的层叠上下文。
  • 这个新的层叠上下文就像一个独立的“图层”，它的所有子元素都会在这个图层内部进行堆叠，而不会直接与外部的元素进行比较。这意味着，一个父元素创建了层叠上下文后，即使其内部的子元素z-index值很高，也无法超越这个父元素外部的、z-index值较低的元素。
  • 这对于控制复杂UI的层叠顺序至关重要。比如，你有一个弹窗（absolute定位），它需要显示在所有内容之上。你给弹窗设置一个z-index: 9999;。如果弹窗的某个祖先元素也创建了层叠上下文，并且那个祖先的z-index值低于弹窗的兄弟元素，那么弹窗可能就不会显示在最前面。理解层叠上下文是解决z-index失效问题的关键。

• 浮动与层叠：

  • 浮动元素本身不会创建新的层叠上下文。
  • 它们仍然属于其父元素的层叠上下文。浮动元素在正常文档流中的定位元素（position: static;）之上，但在定位元素（position: relative;, absolute等）之下。
  • 这意味着，你不能通过给浮动元素设置z-index来让它覆盖一个正常流中的position: relative;的元素。浮动元素在层叠顺序中的位置是比较固定的，它位于背景和边框之后，但位于行内内容和定位元素之前。

所以，如果你需要精细控制元素的层叠顺序，你几乎必然会用到定位属性，因为它们是创建层叠上下文的主要方式。浮动则不具备这种能力，它更多地是影响元素的平面布局，而非深度堆叠。

在响应式设计中，浮动和定位各自的局限性与优势是什么？

在响应式设计的语境下，浮动和定位的表现和适用性确实大相径庭。

浮动（Float）在响应式设计中的表现：

• 局限性：
  • 布局复杂性： 浮动最主要的局限性在于，它在创建复杂、多列且需要适应不同屏幕尺寸的布局时，会变得非常笨拙。你需要大量使用媒体查询来调整浮动元素的宽度、清除浮动规则，甚至在某些断点处完全取消浮动，转为块级元素。这无疑增加了CSS代码的复杂度和维护成本。
  • 清除浮动问题： 随着屏幕尺寸变化，父元素高度塌陷和子元素溢出等问题会变得更加难以预测和管理。
  • 顺序控制： 浮动元素在HTML中的顺序往往决定了它们在页面上的排列顺序。在响应式设计中，如果需要改变元素的视觉顺序（比如在小屏幕上某个侧边栏内容跑到主内容上方），浮动就很难实现，因为它会破坏语义化的HTML结构。
• 优势：
  • 文本环绕： 在响应式设计中，浮动最适合、也最被推荐的用途依然是文本环绕图片。无论屏幕大小如何变化，文本都能自然地围绕图片流动，这是非常优雅且响应式的效果。
  • 简单布局： 对于非常简单的、一两列的布局，如果不需要复杂的重排和顺序调整，浮动依然可以胜任，且代码量相对较小。

定位（Position）在响应式设计中的表现：

• 局限性：
  • 脱离文档流： absolute和fixed定位的元素会脱离文档流，这意味着它们不再参与正常的布局计算。在响应式设计中，如果这些元素是主布局的一部分，它们可能不会随着其他内容自动调整位置，或者可能会覆盖其他内容。你需要精确地计算它们的top/right/bottom/left值，并通过媒体查询进行调整。
  • 内容重叠： 如果不小心，绝对定位的元素很容易在小屏幕上与周围内容发生重叠，导致布局混乱和用户体验下降。
  • 可访问性： 绝对定位的元素有时可能会影响屏幕阅读器的阅读顺序，因为它们的视觉顺序可能与HTML结构顺序不一致。
• 优势：
  • 固定元素： fixed定位在响应式设计中依然是不可替代的。无论屏幕大小或滚动位置如何，顶部导航、底部工具栏、返回顶部按钮等都需要保持固定，这对于用户体验至关重要。
  • 叠加与微调： absolute定位非常适合在响应式组件内部进行微调和叠加效果。例如，在一个卡片组件内，无论卡片大小如何变化，其右上角的“删除”按钮或左下角的“折扣”标签都能保持相对位置。这些内部元素的定位通常与外部布局无关，因此响应性很好。
  • 粘性效果： sticky定位在响应式设计中表现出色，它能根据滚动位置动态改变元素的定位方式，非常适合响应式侧边导航或内容标题的“粘性”效果。
  • 模态框/弹窗： 响应式模态框或弹窗通常会使用fixed或absolute定位来确保它们覆盖整个屏幕并居中显示，无论视口大小如何。

总结来说，在现代响应式布局中，浮动已经基本被Flexbox和Grid取代了其作为主要布局工具的地位，但在文本环绕等特定场景仍有其价值。而定位，尤其是fixed和absolute，由于其独特的“脱离文档流”和“层叠控制”能力，在实现各种UI叠加、固定元素和组件内部的精细调整方面，依然是响应式设计中不可或缺的工具。

今天关于《浮动与定位有何不同？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！