很多刚开始学 CSS 的人学到浮动这一章都会有原来还能这么玩的新鲜感接着又会在清除浮动里摔一跤。确实float 是 CSS 里最特别的一个属性它不是用来定位的却长期承担着布局大任它表面上只是 left 和 right 两个方向背后牵出的却是文档流、盒模型、BFC、外边距合并这一整串底层概念。这篇文章就把 float 的前世今生、经典用法、清除浮动的各种方案以及项目里踩过的坑一条条捋清楚。不管你是刚看完css选择器和盒模型的初学者还是已经写了几年页面但没系统梳理过布局的前端都有值得挖掘的细节。看完你至少会明白float 为什么会有那些奇奇怪怪的表现以及遇到布局问题时该往哪个方向排查。1. 浮动的底层逻辑文档流、脱离与包裹1.1 先搞清楚文档流这个概念要理解浮动第一步得知道什么叫文档流。你可以把网页想象成一张白纸浏览器默认的排版方式非常像在 Word 里打字块级元素像段落一样从上往下排列行内元素像文字一样从左往右排列前一个元素占据的空间后一个元素都会避开。这种默认的、从上到下从左到右的排列规则就是文档流。没有它页面上的元素就会乱成一锅粥。浮动做的事情就是把某个元素从这条流动的线里单独拎出来让它向左或向右靠去同时让其他内容像溪水绕过石头一样绕开它。很多教程会说浮动元素脱离文档流这句话方便理解但不准确。准确地说浮动元素是脱离了纵向的文档流计算但它仍然占据横向位置周围的文本也会为它让路。你可以把浮动看作一个半脱离状态它自己漂走了但掀起的浪花还在影响周围的布局。如果你接下来要学习 flex 或者 grid这篇文章里反复强调的文档流概念依然派得上用场。flex 介入后主轴和交叉轴上的排列逻辑变了但元素在业务意义上的先后顺序和是否撑起父容器这些直觉很多都是从文档流这个基础建立起来的。所以别急着跳过这个概念。1.2 浮动的三个关键特性脱离、环绕、收缩float 的属性值不多left、right、none再加上一个几乎不用的 inherit。但它的表现可以从三个维度去拆解。第一个是脱离文档流。元素设置了 float: left 之后它就不再参与父容器的正常高度计算后面未浮动的块级元素会顶到它的下方。注意顶到下方不是完全覆盖块级元素的盒子和浮动元素会重叠但盒子内的文字不会盖在浮动元素上而是主动避开形成一个围绕的效果。第二个是环绕。这是 float 诞生的最初动机也是文字环绕图片的核心机制。浮动元素靠左或靠右之后后面的行内内容包括文字、行内图片、行内元素都会顺着它的边界重新排列。这个特性在处理文章配图时特别好用不需要手动去算文字的位置浏览器会自动完成。第三个是收缩适配。一个元素浮动后它不再默认占满父容器的整行宽度而是像行内块元素一样收缩到内容需要的宽度。这个特性在布局时很有用比如导航菜单横向排列时a 标签的内容多宽那个 li 就多宽但它也意味着如果你想给浮动元素一个固定宽度就必须显式设置 width否则内容宽度不稳定会造成布局抖动。这三个特性是一体的。脱离文档流带来高度塌陷环绕带来图文混排收缩带来自适应宽度。你以后遇到 float 的任何一个诡异现象都可以回过头来用这三个特性去解释。1.3 浮动到底是怎么变成万能布局工具的早期 CSS 的布局能力非常有限没有 flex更没有 grid要做出两列、三列的页面只能靠 float 和定位硬凑。于是 float 被强行抬举成了布局的核心工具这是它被大量使用的原因也是后来各种 bug 的源头。用 float 做布局的核心套路并不复杂把一个容器里的几个子元素全部设置 float: left它们就会从左到右排成一排再用宽度百分比或固定像素控制每一列的宽度。比如左侧栏占 240px右侧内容区占剩下的部分两个元素都向左浮动就能并列。听起来很简单实际一写就会遇到各种问题父容器高度坍缩列宽加起来超过一行导致换行错位清除浮动写少了连背景都显示不出来。这些问题的根源还是因为 float 的初衷是排版而不是布局。排版只关心内容怎么流动布局则要精确控制位置和尺寸。把一个文本环绕工具当作布局框架来用自然需要一堆补丁去填坑。这一段历史后来成为前端圈津津乐道的黑历史但也恰恰说明了一个道理任何工具都有适用边界超范围使用时出现的问题往往比工具本身更值得学习。2. 三个经典场景图文混排、多列布局、菜单横向化2.1 场景一图文混排最简单但最能检验基本功图文混排是 float 唯一始终没被完全替代的经典用法。你写一篇文章想放一张配图在左侧正文环绕在右侧直接用 float: left 就能实现。div classarticle img srccover.jpg alt文章封面 classcover p这里是文章正文……文字会自动从图片下方绕行。/p /div.cover { float: left; width: 240px; margin-right: 16px; }给图片加上 float: left 后图片立即靠左后续的文字会贴着图片右侧和下方自然环绕效果立竿见影。代码就这么几行但里面的细节很值得琢磨。首先宽度要设置否则图片会按原始尺寸显示很容易超过容器其次margin-right 不能省浮动元素并不会自动在右侧留白你不设置 margin文字就会直接贴在图片边线上视觉上非常拥挤。我见过很多新手在这个看似简单的场景里翻车问题往往是给的 width 太大图片和文字总宽度超过容器导致文字被挤到图片下方看起来就像是图片把文字踢开了。这时候把宽度调小一点或者把文字改成省略号截断就正常了。这背后依然是浮动元素的宽度计算问题所以图文混排虽然简单却能把对浮动和盒模型的理解测试得很透彻。2.2 场景二两列/多列布局必须搭配宽度的计算以前做后台或者新闻站最经典的两列布局就是左侧固定宽度的侧边栏右侧自适应宽度的内容区。用浮动写是这样div classlayout aside classsidebar导航/aside main classcontent内容/main /div.sidebar { float: left; width: 240px; } .content { float: left; width: calc(100% - 240px); }这里两个子元素都 float: left于是并排形成两列。calc 是后来才有的早年只能用 margin-left 来腾出空间也就是侧边栏浮动内容区不浮动但设置 margin-left: 240px。这种方式更稳因为浮动元素少一个出问题的概率就少一分。新手最容易掉进去的坑是把宽度和 padding、border 直接相加。比如内容区设置 width: 70%又加了 padding: 20px那么实际占用的宽度就是 70% 加上 40px一旦超过父容器剩余宽度第二列就掉下去了。这也是为什么很多讲css盒模型的教程都会强调 box-sizing: border-box——把 padding 和 border 收进 width 里算出来的宽度才靠谱。多列布局看起来只是几行 float真正复杂的是响应式。固定宽度在桌面上显示正常一缩到手机分辨率就崩。老项目里的常见做法是加媒体查询在不同断点下调宽度。这套思路和现在的 grid 响应式写法完全是两个时代的东西但你要是能看懂老的 float 布局再去学 grid 会轻松许多。2.3 场景三导航菜单横向排列早期网站菜单基本都是竖排的列表想改成横向排列最简单的方法就是让 li 浮动ul classnav lia href#首页/a/li lia href#关于我们/a/li lia href#产品中心/a/li /ul.nav { list-style: none; margin: 0; padding: 0; background: #333; overflow: hidden; /* 触发 BFC顺便解决浮动后高度塌陷 */ } .nav li { float: left; } .nav a { display: block; padding: 12px 20px; color: #fff; }这段代码有三处容易被忽略。第一ul 的默认样式必须清掉list-style 和 padding 不设项目符号和缩进会让人抓狂。第二li 浮动后ul 本身因为没有内容高度会塌陷成 0我在这里用 overflow: hidden 触发 BFC 来把高度救回来这在后面清除浮动部分会详细讲。第三a 标签必须设成 display: block不然点击区域只覆盖文字本身不覆盖 padding用户点起来很费劲。很多新手习惯用 display: inline-block 来横向排列 li这样也能排成一行但 inline-block 会把 html 里的换行和空格当成空白字符渲染到页面上所以 li 之间总是有几像素的间隔。浮动就没有这个问题。这也是为什么老导航栏普遍用 float而不是 inline-block。需要进一步做下拉菜单时浮动只是负责一级菜单的横向排列子菜单往往搭配绝对定位在父级相对定位的基础上展开。浮动把横向骨架立起来定位负责浮层细节两者配合这也是老项目中常见的组合拳。3. 清除浮动为什么父容器会塌以及怎么救3.1 高度塌陷是怎么发生的高度塌陷是浮动最出名的事故现场。看一段最简单的代码div classbox div classchild stylefloat: left; width: 100px; height: 100px; background: #e74c3c;/div /divbox 没有设置高度里面唯一的 child 又是浮动的。由于浮动元素脱离了文档流box 在计算自身高度时根本看不到这个 child于是 box 的高度变成 0背景色和边框全部缩成一条线。如果 box 后面还有兄弟元素它也会直接顶上来整个页面就像被人抽掉了一块积木。这个场景从浮动诞生的第一天就存在。所以要理解清除浮动的本质就是想方设法让父容器意识到自己还有浮动子元素占着位置。思路只有两条线一条是让父容器形成 BFCBFC 会把浮动子元素的高度纳入计算另一条是往浮动元素的末尾添加一个显式的清除元素告诉浏览器这里还有东西别让它塌下去。3.2 4 种清除浮动方案对比清除浮动的方法在社区里讨论了很多年总结下来常见的有四种每种都有明显的优缺点。第一种在浮动元素后面手动加一个空标签设置 clear: both。这是最朴素的做法兼容性最好但要在 html 里插入没有语义的节点读代码时到处都是莫名其妙的div styleclear:both/div维护起来很烦。老代码里见得多现在不推荐这么写。第二种父元素设置 overflow: hidden 或 overflow: auto。这个方法代码最少原理是 overflow 非 visible 时会创建新的 BFC。它有副作用一旦子元素内容超出父元素范围会被裁剪或出现滚动条。适合那些内容高度可控、不易溢出的容器。第三种让父元素也浮动。这听起来很野但确实有人这么写。父元素浮动了它自己也脱离文档流高度自然就由浮动子元素撑起来。问题是父元素的父元素又开始塌陷一层套一层最后只能再靠一个外层容器或 clear 来收拾残局。不推荐主动使用。第四种用伪元素给父元素添加 clearfix 类这也是目前最主流的方案.clearfix::after { content: ; display: block; clear: both; }原理很简单父元素的最后一个子元素由伪元素模拟出来这个伪元素是块级空元素设置 clear: both 后它会落在线性排列的最下方从而把浮动的子元素高度兜在父元素里。这个方案不污染 html副作用最小是我现在最常用的。方案优点缺点适用场景空标签 clear: both兼容性最好增加无语义标签维护成本高老项目、需要兼容远古浏览器父元素 overflow:hidden代码最少可能裁剪内容或出现滚动条容器内容高度可控时父元素也浮动写法直接层层塌陷连锁反应大几乎不推荐伪元素 clearfix不污染 HTML兼容性好需要额外加类名现代项目首选3.3 伪元素 clearfix 的实操细节clearfix 写起来几行但里面每一个属性都有它存在的理由。content 必须声明哪怕是一个空字符串没有 content 的伪元素根本不会生成。display 要设置成 block虽然部分浏览器对行内伪元素也生效但规范上块级更稳妥。clear: both 是把浮动高度兜住的关键。顺序别乱三个属性缺一不可否则要么没效果要么在个别浏览器上表现异常。实际项目里我不会到处重复写这段代码而是把它抽成一个公共类比如 .clearfix放在全局 CSS 文件里。任何父元素只要加上这个类就能清除内部浮动的副作用。这样团队成员写布局的时候顺手加一个类就行不用每次脑补伪元素怎么写。如果只是给特定元素用也可以写成带前缀的形式避免和其他类名冲突.layout::after { content: ; display: table; clear: both; }display: table 在这里也可以因为表格单元格本身就是块级盒子能保证 clear 生效而且很少出现额外空白。不过最常用的还是 display: block。你只要认准其中一种用顺手就够了不用每种都背。这里还想补充一个知识点clear 除了 both还有 left 和 right。clear: left 表示这个元素左侧不允许浮动元素如果它在浮动元素之后会自动下落到一个没有浮动元素占位的位置。大多数场景只要 both 就够但在复杂多列布局里精确控制某一侧时left 和 right 能派上用场。多写几次你就会明白clear 并不是只能清空它更像一个边界守卫。3.4 顺便聊聊 BFC为什么它能兜住浮动BFC 的全称是块级格式化上下文听起来很硬核其实可以把它理解成一个独立的小世界。在这个小世界内部元素的布局和外部互不干扰。比如一个元素形成了 BFC它就不会把内部的浮动元素漏到外面去也不需要外部元素来兜底。常见的触发条件有这些根元素html、浮动元素本身、绝对定位元素、display: inline-block、display: table-cell、display: table-caption、overflow 不为 visible 的元素以及 modern CSS 中 flex 和 grid 容器的某些情况。其中overflow: hidden 和 display: table-cell 是实战中常常用来触发 BFC 的手段。我们之前提到的父元素 overflow: hidden 清除浮动本质上不是 clear 起的作用而是 overflow: hidden 给父元素创建了一个新的 BFC。BFC 内部的布局完全独立父元素在计算高度时会把浮动的子元素也算进去于是塌陷就解决了。理解了 BFC你再看 float 的很多表现会豁然开朗。为什么浮动元素不会溢出到兄弟容器的背景里因为浮动元素自己也会形成 BFC它的内部内容参与自己的布局。为什么 overflow: hidden 能当清除浮动用因为它在外层创造了一层结界。CSS 的很多属性不是孤立的背靠 BFC 这个概念很多以前靠死记的结论都能推导出来。4. 实战中的坑位与调试思路4.1 常见问题速查表浮动的坑在项目里几乎都是一组症状对一个根因我把这些年来高频遇到的问题整理成一张表方便你直接对照。症状根因解决办法父容器高度塌陷为 0所有子元素都浮动了加 clearfix 或触发 BFC第二列掉到第一列下方浮动元素宽度总和超过容器检查 width、padding、border 和 box-sizing背景色或边框不完整高度塌陷导致容器缩成一条线先解决塌陷再调背景文字紧贴浮动元素缺少 margin 或 padding 间距给浮动元素加 margin元素间距莫名变大误用 inline-block 导致空白被渲染改用 float 或设置 font-size: 0普通块级元素被浮动元素遮挡块级元素没有主动避让给块级元素加 clear 或父容器清除浮动响应式下布局错乱固定宽度超长改用百分比或媒体查询控制宽度这些现象看起来不一样但根因大部分都指向同一个方向浮动的副产物和盒模型计算。所以我每次排查浮动问题都会先从盒模型和清除浮动入手命中率极高。4.2 浮动元素的外边距合并与 margin 对不齐块级元素的上下 margin 在默认情况下会发生合并取较大的那个值但浮动元素的外边距不会合并。这听起来是好事可实际使用时会遇到另一个问题margin 算起来总是不对。最常见的例子两个浮动元素并排想让它们之间的间距是 20px你给右边的元素设置了 margin-left: 20px但它实际显示出来的距离可能比 20px 多或者少。多半是因为父容器有 padding或者元素本身有 border把 margin 的参考坐标搞乱了。这时候可以单独给每个元素加 outline 来观察边界或者直接在开发者工具里看盒模型图。还有一个经典误会给浮动元素设置 margin: 0 auto想让它水平居中。有人会问为什么我的 input 或者 div 用浮动后不能居中答案就在这里。margin: 0 auto 对普通块级元素有效因为浏览器会通过自动分配左右外边距来居中但浮动元素已经脱离文档流它只会紧贴左边界或右边界auto 对它没有任何意义。想居中一个浮动元素只能靠外层容器包一层配合 text-align 或者 flex而不是硬给浮动元素设 auto。早期正因为这样很多css中怎么把input居中css body 居中的问题才会这么难解。flex 出现后居中变成了一件轻松的事但如果你不懂 float 的规则看了答案也可能一知半解。4.3 调试技巧背景色、边框和浏览器检查器布局问题最忌讳盲改。我在排浮动布局时第一步永远是加颜色。给每个关键容器铺上不同背景色或者虚线边框马上就能看出哪个区域没有按预期撑开哪个元素贴着另一个元素的边。比如高度塌陷你给父容器加个浅色背景如果背景只显示一条线说明盒子高度已经变成 0 了。第二步是用浏览器开发者工具。悬停元素时浏览器会高亮盒模型的四块区域内容、padding、border、margin。通过看这个高亮能判断出元素实际占据了多少宽度哪里超出了父容器。浮动错位的时候优先检查父容器宽度再检查子元素宽度接着看 margin 和 border最后看一眼 box-sizing 是不是 border-box。按这个流程走大多数问题几分钟就能定位。还有一个小习惯一次只改一个属性。浮动布局牵一发动全身经常出现调好了第二列第一列又塌的连锁反应。我有一次为了修导航栏的间距问题连续调了 float、margin、padding、width 四个属性最后发现问题只是父容器没写 clearfix。如果当时一次只改一个我根本花不了那么多时间。改完一个值就刷新验证这是最高效的调试方式。5. 浮动的边界与现代化替代方案5.1 Float 的局限栅格、垂直居中、等高布局虽然浮动能做布局但它毕竟是个排版工具和布局的需求有天然壁垒。第一个明显的短板是垂直居中。浮动元素可以靠左靠右但没有任何属性能让它垂直居中。想实现的话要么父容器固定高度人工算 margin要么用绝对定位配合 transform 硬挪但容器高度变化后一切失效。在 flex 之前垂直居中一直是一个高频搜索问题罪魁祸首就是 float 这套方案在垂直方向上几乎无能为力。第二个短板是等高布局。两个浮动列高度不一致时矮的那一列背景会缩短视觉上断层。老前端们想了很多 hack比如 display: table、负 margin 假装等高但本质上都是打补丁遇到复杂内容照样露馅。第三个短板是栅格系统。像 Bootstrap 这种框架早期就是用 float 做栅格通过百分比宽度把一行拆成 12 列。原理不复杂但每一行都要清除浮动再加一组媒体查询来控制响应式断点写起来相当啰嗦。栅格的行、列、间距全靠类名堆叠维护起来很考验耐心。这三个短板不是代码写得不够好而是 float 从设计上就没有考虑这些需求。理解了这一点再看 flex 和 grid 的设计就会豁然开朗——它们正是为了解决这些布局原生需求而生的。5.2 Flexbox 和 Grid 怎么解决这些痛点Flexbox 从设计上就是处理一维布局的。水平居中、垂直居中、等分宽度、空间分配它靠 flex-direction、justify-content、align-items 这几个属性就能搞定。比如之前 float 布局里的两列用 flex 写是这样的.layout { display: flex; } .sidebar { flex: 0 0 240px; } .content { flex: 1; }内容区不再计算百分比flex: 1 会自动占据剩余空间。间距可以用 gap 来设置不用再为 margin 算来算去。垂直居中更是简单父容器设 align-items: center子元素立刻垂直居中这在 float 时代是想都不敢想的体验。Grid 则是二维布局的王者。页面整体结构通常都是行和列同时存在的grid-template-columns 和 grid-template-rows 直接描述二维网格三列自适应布局只用一行代码就能解决。而且 grid 还支持命名区域可以让 DOM 顺序和视觉顺序完全解耦想先渲染哪个就先渲染哪个彻底打破了 float 布局对 DOM 顺序的依赖。你可能要问了既然 flex 和 grid 这么好为什么还要学 float因为在实际项目里尤其是老项目里float 代码依然大量存在。你会读、会改、会迁移才不会在接手旧系统时无从下手。5.3 实际项目选型建议什么时候继续用 Float我的选型经验可以总结成一句话页面骨架用 grid一维排列和对齐用 flex图文环绕用 float。具体场景里正文段落中的图片环绕float 仍然是最自然的选择。你让 flex 来做这个会非常别扭因为环绕不是一个整齐的排布而是一种内容流动。给图片设置 float: left文字自动绕着走这个效果至今没有更优雅的替代方案。如果是导航栏、卡片列表、弹窗内容这种一维排列的组件优先 flex。如果是整个页面的栅格布局、后台管理系统的大框架优先 grid。如果你在维护一个老项目页面里全是 float没必要急着大重构先看懂每一块的作用再逐步迁移。还有一点float 也不是一无是处。它的轻量依然是一种优势某些简单场景下用 float 比引入一个完整布局方案更省心。比如一个只负责局部环绕的小组件你总不至于为了它去封装一个 grid 容器。工具没有绝对的高下关键看场景。做前端越久越觉得 float 是一个值得认真对待的知识点。它记录了 CSS 在布局能力不足时的挣扎也锻炼了一整代前端工程师对文档流、盒模型和 BFC 的敏感度。我自己后来写 flex 布局时遇到疑难问题仍然会回到 float 的视角去思考元素之间是怎么让位的。所以如果你正在接触 CSS别急着跳过浮动这一章老老实实把它练熟多吃几次亏后面用更现代的工具时才会真正得心应手。