浮动详解

什么是“浮动”?

浮动是一个 CSS 定位属性。 为了理解其目的和起源，我们可以参考印刷设计。 在印刷版式中，图像可以设置到页面中，以便文本根据需要环绕它们。 这通常被称为“文字环绕”。 这是一个示例。

在页面布局程序中，包含文本的框可以被告知遵循文字环绕，或者忽略它。 忽略文字环绕将允许文字直接流过图像，就像它不存在一样。 这就是该图像成为页面流的一部分（或不是）的区别。 网页设计非常相似。

在网页设计中，应用了 CSSfloat属性的页面元素就像印刷版式中文字环绕的图像一样。 浮动元素仍然是网页流的一部分。 这与使用绝对定位的页面元素截然不同。 绝对定位的页面元素被移除出网页流，就像印刷版式中的文本框被告知忽略页面环绕一样。 绝对定位的页面元素不会影响其他元素的位置，其他元素也不会影响它们，无论它们是否彼此接触。

使用 CSS 设置元素的浮动如下所示

#sidebar {
  float: right;			
}

float 属性有四个有效值。 left 和 right 分别将元素浮动到这些方向。 none（默认值）确保元素不会浮动，而 inherit 将采用该元素父元素的浮动值。

浮动用于什么?

除了围绕图像环绕文本的简单示例之外，浮动还可以用于创建整个网页布局。

虽然浮动仍然可以用于布局，但如今我们拥有更强大的工具来创建网页布局。 即，Flexbox 和 Grid。 浮动仍然值得了解，因为它们具有一些完全独特的特性，本文将对此进行全面介绍。

浮动在较小的实例中也很有用。 以网页的这个小区域为例。 如果我们对小头像图像使用浮动，当该图像大小发生变化时，框中的文本将重新流动以适应

同样的布局也可以使用容器的相对定位和头像的绝对定位来完成。 通过这种方式，文本将不受头像的影响，并且无法在大小更改时重新流动。

清除浮动

浮动的姊妹属性是clear。 设置了 clear 属性的元素不会像浮动期望的那样向上移动到浮动旁边，而是会将自身向下移动到浮动下方。 同样，插图可能比文字更有帮助。

在上面的示例中，侧边栏浮动到右侧，并且比主要内容区域短。 然后，页脚需要跳到该可用空间中，这是浮动所要求的。 为了解决此问题，可以清除页脚以确保它始终位于两个浮动列下方。

#footer {
  clear: both;			
}

Clear 也有四个有效值。 both 最常使用，它清除来自任一方向的浮动。 left 和 right 可分别用于仅清除一个方向的浮动。 none 是默认值，通常不需要，除非从级联中删除 clear 值。 inherit 将是第五个，但奇怪的是在 Internet Explorer 中不受支持。 虽然在实际应用中不太常见，但仅清除左侧或右侧浮动确实有其用途。

大塌陷

使用浮动时，更令人困惑的事情之一是它们如何影响包含它们的元素（它们的“父”元素）。 如果此父元素仅包含浮动元素，则其高度将完全塌陷为零。 如果父元素不包含任何视觉上可见的背景，则这一点并不总是显而易见的，但务必注意这一点。

尽管塌陷似乎违反直觉，但替代方案更糟糕。 考虑这种情况

如果顶部的块级元素要自动扩展以适应浮动元素，则段落之间文本流中将出现不自然的间距中断，并且无法通过任何实用方法修复。 如果出现这种情况，我们设计师对这种行为的抱怨将比对塌陷的抱怨多得多。

塌陷几乎总是需要处理，以防止出现奇怪的布局和跨浏览器问题。 我们通过在容器中浮动元素之后但在容器关闭之前清除浮动来修复它。

清除浮动的方法

如果您处于始终知道后续元素是什么的情况，则可以将clear: both;值应用于该元素并继续您的业务。 这是理想的，因为它不需要任何花哨的黑客和任何额外的元素，使其完美地语义化。 当然，事情通常不会按这种方式进行，我们需要在我们的工具箱中拥有更多清除浮动的工具。

• 空 div 方法实际上是一个空 div。 <div style="clear: both;"></div> 有时您会看到使用 <br> 元素或其他一些随机元素，但 div 最常见，因为它没有浏览器默认样式，没有任何特殊功能，并且不太可能使用 CSS 进行通用样式化。 此方法受到语义纯粹主义者的蔑视，因为它的存在对页面没有任何上下文意义，并且完全是为了演示而存在的。 当然，从最严格的意义上讲，他们是正确的，但它可以正确地完成工作并且不会伤害任何人。
• 溢出方法依赖于在父元素上设置 overflow CSS 属性。 如果此属性在父元素上设置为 auto 或 hidden，则父元素将扩展以包含浮动，从而有效地为后续元素清除它。 此方法可以非常语义化，因为它可能不需要额外的元素。 但是，如果您发现自己只是为了应用它而添加了一个新的 div，那么它与空 div 方法一样不语义化，并且适应性较差。 还要记住，overflow 属性并非专门用于清除浮动。 注意不要隐藏内容或触发不需要的滚动条。
• 轻松清除方法使用巧妙的 CSS 伪选择器（:after）来清除浮动。 您不是在父元素上设置 overflow，而是向其应用一个额外的类，例如“clearfix”。 然后应用此 CSS

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

这将在父元素之后应用少量隐藏内容，从而清除浮动。 这不是全部内容，因为需要使用其他代码来适应旧版浏览器。

不同的场景需要不同的浮动清除方法。 例如，一个由不同类型块组成的网格。

为了更好地视觉上连接相似的块，我们希望根据需要开始新的一行，在本例中是颜色发生变化时。 如果每个颜色组都有一个父元素，我们可以使用溢出或轻松清除方法。 或者，我们在每个组之间使用空 div 方法。 三个之前不存在的包装 div 或三个之前不存在的 after div。 我让你来决定哪个更好。

浮动的问题

浮动经常因其脆弱性而受到抨击。 这种脆弱性的大部分原因来自 IE 6 及其大量与浮动相关的错误。 随着越来越多的设计师放弃对 IE 6 的支持，您可能并不在乎，但对于那些在乎的人来说，这里有一个快速概述。

• 浮动元素下移 是一个症状，表现为浮动元素内部的一个元素比浮动元素本身更宽（通常是图片）。大多数浏览器会将图片渲染在浮动元素外部，但突出部分不会影响其他布局。IE 会扩展浮动元素以包含图片，这通常会极大地影响布局。一个常见的例子是，图片突出到主要内容之外，导致侧边栏向下移动。

• 双边距错误 – 在处理 IE 6 时，另一件需要记住的事情是，如果在与浮动方向相同的方向上应用边距，它会使边距加倍。快速修复：将浮动元素的display设置为inline，不用担心，它仍然会保持块级元素。
• 3像素偏移 是指紧挨着浮动元素的文本被神秘地推开了3像素，就像浮动元素周围存在一个奇怪的力场一样。快速修复：为受影响的文本设置宽度或高度。
• 在 IE 7 中，底部边距错误 是指，如果一个浮动父元素内部包含浮动子元素，则父元素会忽略这些子元素的底部边距。快速修复：改为在父元素上使用底部内边距。

替代方案

如果您需要文本环绕图片，实际上并没有浮动的替代方案。说到这里，请查看这个相当巧妙的技术，用于环绕不规则形状的文本。但对于页面布局，确实有其他选择。Eric Sol 在 A List Apart 上有一篇关于伪绝对定位的文章，这是一种非常有趣的方法，在很多方面结合了浮动的灵活性与绝对定位的优势。CSS3 有模板布局模块，当被广泛采用后，将成为首选的页面布局技术。

视频

我之前做过一个屏幕录制，解释了其中许多浮动概念。