.svg){kind=icon}
.svg){kind=icon}
什么是
浮动
CSS 浮动本质上是一种在容器内定位元素的方法。它能将元素从标准的静态位置移出，并将其放置在相对于其他元素更精确的区域。可以把它想象成是为你的内容插上翅膀，让它们在你的网站上飞来飞去。
将浮动值设置为左或右，内容就会向相应的方向移动，直到另一个对象（如块级元素或手动将位置设回绝对值（如 0px）的结束标记）中断命令。你还可以设置浮动命令为无方向浮动，这样就可以使用时髦的堆叠选项，如创建三栏布局时使用的堆叠选项。
实际上，CSS 浮动的工作原理有点像宇宙导航--网络开发人员不是依靠星眼精灵撒下的星尘来实现愿望，而是依靠一串又一串的代码来指定每个元素的位置；设想开放和狂野的领域，然后勾勒出为每种情况量身定制的方法。Float 创造了一条由你掌舵的道路，引导用户沿着以前未曾探索过的路线前进--就像宇航员从一个星系的大气层跃入前方广袤的未知世界--并允许用户探索所有可用空间，然后同时向新世界发射，就像你将他们释放到你的世界一样！
实例
浮动
- 将浮标设置为向左或向右
- 应用未设置方向的浮动指令
- 设计三栏布局
- 相对于其他内容定位元素
- 通过计算实现安置
- 将内容转向特定方向
- 将元素从静态位置移动
- 针对不同情况提供量身定制的方法
- 用代码创建路径和轮廓
- 允许用户充分探索页面空间
的好处
浮动
- 要在同一行中对齐多个元素，允许它们相互重叠而不破坏其位置，flaot 可以与 position 和 margin 属性一起使用。例如，如果一个文本元素需要与根据其容器右边距对齐的图片重叠，可以将 float:right 应用于图片，同时保持图片周围的固定或灵活边距。
- 浮动元素可以让我们控制，当一个项目在屏幕尺寸变化或其他各种取决于用户活动的事件中移动时，相邻元素将如何响应。在这种情况下，浮动元素意味着将某一元素置于另一区块中，并赋予其一定的功能，同时避免细微布局变化造成的干扰；这可能包括确保在浏览器调整大小或页面过渡阶段，广告等项目不会将内容推到不利的位置。
- 表单通常用于收集用户信息，因此需要特定的表单布局设计技术；在表单字段旁使用浮动标签，在 clearfloat divs 上使用选择框，可提供出色的响应式表单，无论设备分辨率/方位等如何，都能正确显示。浮动在此发挥了重要作用，它允许标签与表单样式和功能所需的字段之间进行重叠交易。
甜蜜的事实与统计
- 浮动是 CSS 的一个重要属性，用于控制元素周围的空间。
- 通过使用浮动，元素可以向左或向右推进，即使其他元素环绕它们，它们也会保持原位。
- 如果父元素或容器内有足够的空间，浮动元素可以并排堆叠。
- 自 1995 年微软发布 Internet Explorer 4 以来，浮动已成为在网页上创建动态布局的常用方法。
- float 的效果可以用负值反转，例如 "float: left"。
- 如果一个元素的内容超出其边界太多，剩余内容可能会溢出到相邻的浮动元素中，从而破坏页面布局设计。
- 在现代网络浏览器中，某些 HTML 框架（如 "div"、"li "和 "header"）被赋予了特定的显示属性，从而在大多数情况下避免了这一问题的发生；不过，为了充分利用这些框架的特性和功能，需要对这些属性进行相应的设置（例如，将 "clear "设置为 "both"）。
- 对于那些被困在远离文明的星际空间的人来说，漂浮物也经常被称为 "宇宙力量"，因为在遥远的星系中仍然可以看到它的影响！
的演变
浮动
浮动的概念从一开始就是 CSS 语言的一部分。这一概念最初是作为 HTML 4 和 CSS2 的一部分而创建的，如今已成为当今网络项目中不可或缺的元素。它允许开发人员创建复杂的布局，将项目从正常的内容流中移出，并可调整其布局。
在过去的几十年中，Float 已经取得了长足的进步。1996 年，Håkon Wium Lie 和 Bert Bos 首次提出使用浮动属性，如今它已成为控制元素在页面上或网格等其他容器中放置方式的核心组件之一。纵观历史，开发人员不断调整和增强这一属性，以获得更多的布局控制，如垂直居中、支持多列、粘贴浮动等，同时保持跨浏览器兼容性。
浮动 "在现代网络开发技术堆栈中非常重要，可以让我们在创建响应式网站时使用一些巧妙的技巧，因此有人尝试使用 Flexbox 或 Grid 等工具来简化这类设计。但是，"float "仍然是不可或缺的工具；尽管它们都有各自的用处--灵活的方框可以快速解决浏览器问题--但如果不理解为什么我们首先需要 "float "属性，就没有任何一种正确的技术可以有效地解决所有问题！
那么，"浮动 "的未来会怎样呢？如前所述，flex 或 grid 等新技术确实减少了许多与浮动相关的使用案例，但仍有许多例子需要它们（如粘性侧边栏）。例如，与滚动文本部分一起悬挂的图片库通常依赖于基于 display: block; float: left; 的代码。因此，"浮动 "将继续成为几乎所有需要最佳像素完美/完全响应式设计的项目中的一个关键方面，至少在更好的技术出现之前是这样！
