float

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 $200 免费额度!

CSS 中的 float 属性用于网页上的定位和布局。 常见的用法可能是将图像浮动到一侧,并让文本环绕它。

.intro-img {
  float: left;
}

语法

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )  
  • 初始值: none
  • 应用于: 所有元素,但如果 display 的值为 none,则无效。
  • 继承:
  • 计算值: 按指定
  • 动画类型: 离散

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;
  • none:元素不会浮动。 这是初始值。
  • left:将元素浮动到其容器的左侧。
  • right:将元素浮动到其容器的右侧。
  • inline-start:基于 writing-modeleft 的逻辑等效项。
  • inline-end:基于 writing-moderight 的逻辑等效项。

浮动元素自动为 display: block;

“float” 的含义是什么?

为了理解 float 的目的和起源,我们可以看看印刷设计。 在印刷版式中,图像可以设置在页面中,以便文本根据需要环绕它们。 这通常被称为“文本环绕”。 这是一个示例。

在页面布局程序中,可以告诉包含文本的框是否要遵守文本环绕,或者忽略它。 忽略文本环绕将允许单词像没有它一样直接流过图像。 这就是该图像是否是页面的一部分(或不是)的区别。 网页设计非常相似。

在网页设计中,应用了 CSS float 属性的页面元素就像印刷版式中的图像一样,文本会围绕它们流动。 浮动元素仍然是网页流的一部分。 这与使用绝对定位的页面元素明显不同。 绝对定位的页面元素从网页流中删除,就像印刷版式中告诉文本框忽略页面环绕一样。 绝对定位的页面元素不会影响其他元素的位置,而其他元素也不会影响它们,无论它们是否接触。

演示

此演示展示了一篇文章,其中包含两张图片:一张设置为 float: left,另一张设置为 float: right。 按“切换浮动”按钮以切换浮动打开和关闭。

浮动用于布局

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

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

同样布局也可以通过对容器使用相对定位,对头像使用绝对定位来实现。 但是,当以这种方式完成时,文本将不受头像影响,并且在大小发生变化时将无法重新调整。

演示

此演示展示了应用了 float: left 的头像。 按“切换图像大小”按钮以查看更宽的头像图像。 请注意,文本会重新调整以适应图像,而不是覆盖图像。

清除浮动

浮动的姐妹属性是 clear。 设置了 clear 属性的元素不会像浮动希望的那样向上移动到浮动旁边,而是会向下移动到浮动下方。 再次说明比文字更有帮助

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

#footer {
  clear: both;
}

clear 也有四个有效值。both 值是最常用的,它清除来自任一方向的浮动。leftright 值可分别用于仅清除来自一个方向的浮动。初始值为 none,这通常没有必要,除非用于显式删除已设置的 clear 值。inherit 值使元素继承其父级的 clear 值。奇怪的是,Internet Explorer 直到 IE8 才支持此值。

清除仅 leftright 浮动,虽然在野外不常见,但肯定有其用途。

大崩溃

使用浮动最令人困惑的事情之一是它们如何影响包含它们的元素(它们的“父”元素)。如果父元素只包含浮动元素,它的高度就会缩减为零。如果父元素不包含任何视觉上明显的背景,这一点并不总是显而易见,但需要注意的是。

虽然缩减可能看起来很反直觉,但另一种情况更糟糕。考虑以下情况

如果顶部的块元素要自动扩展以容纳浮动元素,那么我们在段落之间的文本流中将会有一个不自然的间距中断,并且没有实际的方法可以修复它。如果是这种情况,我们设计师会比我们现在对缩减的行为抱怨得更多。

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

清除浮动的方法

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

  • 空 Div 方法,顾名思义,是一个空 div <div style="clear: both;"></div>。有时你会看到一个 <br /> 元素或其他一些随机元素被使用,但 div 是最常见的,因为它没有浏览器默认样式,没有任何特殊功能,并且不太可能被 CSS 泛型地设置样式。这种方法被语义纯粹主义者所鄙视,因为它对页面没有上下文意义,并且纯粹是为了展示而存在的。当然,从最严格的意义上来说,他们是正确的。但是,它确实能完成任务,并且不会伤害任何人。
  • 溢出方法依赖于在父元素上设置 overflow CSS 属性。如果此属性在父元素上设置为 autohidden,则父元素将扩展以包含浮动,从而有效地为后续元素清除浮动。这种方法可以非常语义化,因为它可能不需要额外的元素。但是,如果你发现自己只是为了应用它而添加了一个新的 div,那么它与空 div 方法一样不语义化,而且适应性更差。另外要注意,overflow 属性并不是专门用于清除浮动的。小心不要隐藏内容或触发不必要的滚动条。
  • 简单清除方法(也称为“clearfix”)使用一个巧妙的 CSS 伪选择器 (:after) 来清除浮动。与其在父元素上设置溢出,不如向其应用一个额外的类,如“clearfix”。然后应用以下 CSS
.clearfix:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

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

另请参见此代码段,它跟踪清除修复的最新技术,包括较新的“微型清除修复”。

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

为了更好地视觉地连接相似的块,我们想根据需要启动一个新的行,在本例中是在颜色改变时。如果每个颜色组都有一个父元素,我们可以使用溢出或简单清除方法。或者,我们在每个组之间使用空 div 方法。三个以前不存在的包装 div 或三个以前不存在的 after div。由你来决定哪种方法更好。

浮动的问题

浮动经常因为脆弱而受到批评。这种脆弱性的大部分原因是 IE6 和 IE7 中的错误。随着这些浏览器逐渐消失,这些错误也随之消失。但是,如果你需要调试“OldIE”,那么理解它们仍然是值得的。

  • 向下推是浮动项内部的元素比浮动本身更宽(通常是图像)的症状。大多数浏览器会将图像渲染在浮动之外,但不会让伸出的部分影响其他布局。旧版本的 IE 会扩展浮动以包含图像,这通常会极大地影响布局。一个常见的例子是,从主要内容中伸出的图像将侧边栏向下推到下面。

    快速修复: 确保你没有这样的图像,使用 overflow: hidden; 来裁剪多余部分。
  • 双边距错误 - 另一个在处理 IE 6 时要记住的事情是,如果你在与浮动相同的方向应用边距,它将使边距加倍快速修复: 在浮动上设置 display: inline,并且不要担心它会仍然是一个块级元素。
  • 3px 偏移是当紧挨浮动元素的文本被神秘地踢开 3px,就像浮动周围有一个奇怪的力场一样。快速修复: 在受影响的文本上设置宽度或高度。
  • 在 IE 7 中,底部边距错误是,如果浮动父元素内部有浮动子元素,则子元素的底部边距会被父元素忽略。快速修复: 使用父元素的底部填充代替。

替代方案

如果您需要文字环绕图片,实际上没有浮动的替代方案。说到这里,请查看这个相当巧妙的技术,用于将文字环绕不规则形状。但对于页面布局,绝对有选择。Eric Sol 在 A List Apart 上有一篇文章,伪绝对定位,它描述了一种非常有趣的技术,在很多方面结合了浮动灵活性与绝对定位的优势。

CSS3 以两种方式处理页面布局

绝对定位的浮动(例如,您像往常一样进行绝对定位,但元素仍然能够影响其他元素,例如让文字环绕它)已被讨论过,但我认为这个想法由于与其他更强大的布局想法相似而被搁置。视频

我曾经录制了一个屏幕截图,解释了其中许多浮动概念。

浏览器支持

ChromeSafariFirefoxOperaIEAndroidiOS
全部全部全部全部全部全部全部

更多信息