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-mode
的left
的逻辑等效项。inline-end
:基于writing-mode
的right
的逻辑等效项。
浮动元素自动为 display: block;
“float” 的含义是什么?
为了理解 float
的目的和起源,我们可以看看印刷设计。 在印刷版式中,图像可以设置在页面中,以便文本根据需要环绕它们。 这通常被称为“文本环绕”。 这是一个示例。

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

在网页设计中,应用了 CSS float
属性的页面元素就像印刷版式中的图像一样,文本会围绕它们流动。 浮动元素仍然是网页流的一部分。 这与使用绝对定位的页面元素明显不同。 绝对定位的页面元素从网页流中删除,就像印刷版式中告诉文本框忽略页面环绕一样。 绝对定位的页面元素不会影响其他元素的位置,而其他元素也不会影响它们,无论它们是否接触。
演示
此演示展示了一篇文章,其中包含两张图片:一张设置为 float: left
,另一张设置为 float: right
。 按“切换浮动”按钮以切换浮动打开和关闭。
浮动用于布局
除了文本环绕图像的简单示例外,浮动还可用于创建整个网页布局。

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

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

演示
此演示展示了应用了 float: left
的头像。 按“切换图像大小”按钮以查看更宽的头像图像。 请注意,文本会重新调整以适应图像,而不是覆盖图像。
清除浮动
浮动的姐妹属性是 clear
。 设置了 clear
属性的元素不会像浮动希望的那样向上移动到浮动旁边,而是会向下移动到浮动下方。 再次说明比文字更有帮助

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

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

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

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

如果顶部的块元素要自动扩展以容纳浮动元素,那么我们在段落之间的文本流中将会有一个不自然的间距中断,并且没有实际的方法可以修复它。如果是这种情况,我们设计师会比我们现在对缩减的行为抱怨得更多。
缩减几乎总是需要处理以防止奇怪的布局和跨浏览器问题。我们通过在容器中浮动元素之后,但在容器关闭之前清除浮动来修复它。
清除浮动的方法
如果你身处始终知道后续元素是什么的情况,你可以将 clear: both;
值应用于该元素,然后继续你的工作。这是理想的,因为它不需要任何花哨的技巧,也不需要任何额外的元素,使其完全语义化。当然,事情通常不会按这种方式进行,我们需要在工具箱中拥有更多清除浮动的工具。
- 空 Div 方法,顾名思义,是一个空 div
<div style="clear: both;"></div>
。有时你会看到一个<br />
元素或其他一些随机元素被使用,但 div 是最常见的,因为它没有浏览器默认样式,没有任何特殊功能,并且不太可能被 CSS 泛型地设置样式。这种方法被语义纯粹主义者所鄙视,因为它对页面没有上下文意义,并且纯粹是为了展示而存在的。当然,从最严格的意义上来说,他们是正确的。但是,它确实能完成任务,并且不会伤害任何人。 - 溢出方法依赖于在父元素上设置
overflow
CSS 属性。如果此属性在父元素上设置为auto
或hidden
,则父元素将扩展以包含浮动,从而有效地为后续元素清除浮动。这种方法可以非常语义化,因为它可能不需要额外的元素。但是,如果你发现自己只是为了应用它而添加了一个新的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 以两种方式处理页面布局
绝对定位的浮动(例如,您像往常一样进行绝对定位,但元素仍然能够影响其他元素,例如让文字环绕它)已被讨论过,但我认为这个想法由于与其他更强大的布局想法相似而被搁置。视频
我曾经录制了一个屏幕截图,解释了其中许多浮动概念。
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
全部 | 全部 | 全部 | 全部 | 全部 | 全部 | 全部 |
更多信息
- CSS 2.2 规范(
float
属性定义) - CSS 逻辑属性和值,级别 1(
float
逻辑属性值) float
在 MDN 上
不错的文章,非常感谢!
老兄,非常感谢,真的很棒的文章。它完全帮助我了解了 float 的工作原理。我属于那种更喜欢图形化展示技术而不是枯燥文本的人。
谢谢
Bala
嗨,只是想知道如何处理具有背景图像或底部边框的块级元素 - 这些设计方面不会包裹起来,并且使我的设计生活变得更加困难。我假设没有解决方案 - 但我想问问大师!对这个 float 问题有什么想法吗?
不错的东西。我遇到的另一个关于浮动的问题(可能类似于 3px 的偏移?)是尝试将一段文本缩进到另一段文本旁边——例如,在排版戏剧或电影剧本时,你可能希望将说话者的姓名放在左边,将实际的台词放在右边,而且你讨厌使用表格。
将 float: left 应用于说话者元素,然后将 margin-left: 70px 应用于以下台词元素,会导致说话者在 Chrome 和 IE 中的每一行都向下偏移。令人恼火的是,这个偏移在 Visual Studio 设计器中没有显示出来…
快速修复:在两个元素上都设置 margin-bottom: 0px; 并在说话者上设置 clear:both。坏消息是:它在浏览器中看起来很好,但在 VS 设计器中看起来完全错误(叹气)… :)
我想知道在网格类型布局中,如果我想有两行,每行三个方框,float left 还是 inline-block 更好?暂时还没准备好尝试网格布局 ;)
感谢你提供的最全面的 CSS 知识。
祝你一切顺利!
elmoluz
浮动 vs. 浮动… “浮动”技巧能满足文本环绕浮动元素吗?浮动指的是,当页面上下滚动时,某个元素始终可见,浮动在右上角,而其他内容环绕它?将此与另一个浮动或固定在页面左上角的元素进行比较… 请注意,由于 IE11 不会将元素浮动到侧面,除非 float 属性是内联样式,因此我们使用标签 `div.aside)(aside` 来帮助设置浮动样式。
布局很简单。
元素 `article ( relative` 包含所有内容,填充页面。元素 `section ( -` 很好地包装了 `div.aside#left`,但被 `div.aside#right` 覆盖。
假设我们使用两个 aside 元素。
标题块是 `div.aside#left`,广告浮动是 `div.aside#right`。
我们编码 `aside ( border:1px position:relative width:100px`。
左上角浮动是
div.aside#left ( float:left margin-right:1em
.浮动是
div.aside#right
(position:absolute *ie6* position:fixed right:1em top:1em
。现在,我们需要 “广告 aside” 始终可见,位于浏览器窗口的右上角!如何让 `aside` 的任何变体使用 `float:right` 而不粘在页面顶部…以及
(在向下滚动时可见的右上角)如何让内容环绕我们的浮动元素?
我无法将我的 Facebook 喜欢/分享按钮保持在我的网页中心。
你能帮我写一些 CSS 代码来阻止它移动吗?
我的 CSS 代码是
.fb-like{position:fixed;padding:15px;margin:0 auto}
此致。
尼尔
我一直都在寻找一种方法来向我的学生解释这一点——你太棒了——感谢你提供如此全面的解释!!!
还有一个值,用于分页媒体,称为 `footnote`。它在 PrinceXML 中已实现并可以正常工作。
我发现一个令人困惑的问题是将浮动与相邻元素的边距一起使用。假设你有一个向左浮动的图像,以及在一个 div 中描述该图像的文本,就像这样
在这种情况下,该 div 相对于图像将具有 0 边距。我发现的唯一解决方案是在图像上设置边距,将相邻元素推开。我非常想知道是否有其他方法可以解决这个问题。
“令人困惑的”大坍塌是 CSS 中的一个缺陷。如果它不是一个缺陷,就不需要专门的解释。看到 CSS 领域领先声音的精力被用来合理化问题而不是解决问题,我感到失望。
很棒的文章!
完美的文章!你很有天赋,应该在大学里教书!
非常感谢!这是迄今为止对浮动最清晰的解释!
这篇文章和网站真是个大发现。
我刚用 Bootstrap 完成了我的第一个网站,不得不调整图像的浮动。
酷
我正在学习 CSS 浮动和定位,这是我找到的最好的文章。
它消除了我对浮动和 clear 属性的所有疑虑。
非常感谢你的这篇教程,萨拉。
只有我一个人吗?还是“清除浮动”部分的图片中存在错误?
浮动的姐妹属性是 clear。设置了 clear 属性的元素不会像浮动元素期望的那样移动到浮动元素旁边,而是会移动到浮动元素的下方。同样,图示比文字更有帮助:“侧边栏(float:right)”应该写成(float:left)。侧边栏显示为向左移动。如果我错了,请见谅。