CSS 被放弃的浮动：从布局主力到历史遗产

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

1. 引言：浮动曾经是布局之王

在 Flexbox 和 Grid 出现之前，前端工程师几乎是用 float 撑起了整个网页布局。两栏、三栏、等高列、栅格系统，甚至整站框架（比如早期的 Bootstrap 2/3）都建立在浮动之上。

但今天，如果你在面试中被问到「如何实现两栏布局」，回答 float 往往会被追问一句：「还有别的方案吗？」——因为浮动已经不再是布局的首选，甚至可以说，它作为布局手段已经被「放弃」了。

这篇文章想聊清楚三件事：浮动为什么会被放弃、它现在还剩什么价值、以及老项目里的浮动代码该怎么处理。

2. 浮动原本是干什么的

float 的初衷并不是布局，而是让文字环绕图片，这是排版领域非常经典的图文混排需求。

.article img {
float: left;
width: 200px;
margin: 0 16px 8px 0;
}

<div class="article">
<img src="cover.jpg" alt="封面" />
<p>这段文字会自动环绕在图片的右侧，形成杂志式的图文混排效果……</p>
</div>

这个能力至今依然有效，也是浮动最「正统」的用法。问题出在后来大家发现：既然浮动能让元素脱离正常流并横向排列，那是不是可以用它来做布局？

3. 浮动做布局的三大原罪

3.1 脱离文档流，父元素高度塌陷

浮动元素会脱离普通流，父容器不再「感知」它的高度，于是出现高度塌陷：

<div class="parent">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>

.left, .right { float: left; width: 50%; }
/* .parent 高度变成 0 */

为了解决这个问题，诞生了一整套「清除浮动」的补丁方案。

3.2 清除浮动：一堆补丁式写法

/* 方案一：额外标签 */
.clearfix { clear: both; }

/* 方案二：overflow */
.parent { overflow: hidden; }

/* 方案三：伪元素（最常用） */
.clearfix::after {
content: "";
display: block;
clear: both;
}

这些写法本身没有错，但它们的存在说明了一件事：用浮动做布局，需要不断打补丁。补丁越多，维护成本越高，也越容易在团队协作中出错。

3.3 语义错位与可读性差

浮动布局的代码往往长这样：

.col-1 { float: left; width: 8.3333%; }
.col-2 { float: left; width: 16.6667%; }
/* … 一直到 col-12 */

它描述的是「怎么排」，而不是「是什么」。当页面结构变化时，这些类名和数值需要整体重算，可读性和可维护性都很差。

4. 现代布局方案如何取代浮动

4.1 Flexbox：一维布局的标准答案

.container {
display: flex;
gap: 16px;
}

.sidebar { flex: 0 0 240px; }
.main { flex: 1; }

不需要清除浮动，不需要计算百分比，父容器高度自动撑开，还能用 gap 控制间距。

4.2 Grid：二维布局的终极方案

.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
}

4.3 对比一览

#mermaid-svg-xH0cwO389BOY8OQR{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-xH0cwO389BOY8OQR .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-xH0cwO389BOY8OQR .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-xH0cwO389BOY8OQR .error-icon{fill:#552222;}#mermaid-svg-xH0cwO389BOY8OQR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xH0cwO389BOY8OQR .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-xH0cwO389BOY8OQR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xH0cwO389BOY8OQR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xH0cwO389BOY8OQR .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-xH0cwO389BOY8OQR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xH0cwO389BOY8OQR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xH0cwO389BOY8OQR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xH0cwO389BOY8OQR .marker.cross{stroke:#333333;}#mermaid-svg-xH0cwO389BOY8OQR svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xH0cwO389BOY8OQR p{margin:0;}#mermaid-svg-xH0cwO389BOY8OQR .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-xH0cwO389BOY8OQR .cluster-label text{fill:#333;}#mermaid-svg-xH0cwO389BOY8OQR .cluster-label span{color:#333;}#mermaid-svg-xH0cwO389BOY8OQR .cluster-label span p{background-color:transparent;}#mermaid-svg-xH0cwO389BOY8OQR .label text,#mermaid-svg-xH0cwO389BOY8OQR span{fill:#333;color:#333;}#mermaid-svg-xH0cwO389BOY8OQR .node rect,#mermaid-svg-xH0cwO389BOY8OQR .node circle,#mermaid-svg-xH0cwO389BOY8OQR .node ellipse,#mermaid-svg-xH0cwO389BOY8OQR .node polygon,#mermaid-svg-xH0cwO389BOY8OQR .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xH0cwO389BOY8OQR .rough-node .label text,#mermaid-svg-xH0cwO389BOY8OQR .node .label text,#mermaid-svg-xH0cwO389BOY8OQR .image-shape .label,#mermaid-svg-xH0cwO389BOY8OQR .icon-shape .label{text-anchor:middle;}#mermaid-svg-xH0cwO389BOY8OQR .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-xH0cwO389BOY8OQR .rough-node .label,#mermaid-svg-xH0cwO389BOY8OQR .node .label,#mermaid-svg-xH0cwO389BOY8OQR .image-shape .label,#mermaid-svg-xH0cwO389BOY8OQR .icon-shape .label{text-align:center;}#mermaid-svg-xH0cwO389BOY8OQR .node.clickable{cursor:pointer;}#mermaid-svg-xH0cwO389BOY8OQR .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-xH0cwO389BOY8OQR .arrowheadPath{fill:#333333;}#mermaid-svg-xH0cwO389BOY8OQR .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-xH0cwO389BOY8OQR .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-xH0cwO389BOY8OQR .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xH0cwO389BOY8OQR .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-xH0cwO389BOY8OQR .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xH0cwO389BOY8OQR .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-xH0cwO389BOY8OQR .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-xH0cwO389BOY8OQR .cluster text{fill:#333;}#mermaid-svg-xH0cwO389BOY8OQR .cluster span{color:#333;}#mermaid-svg-xH0cwO389BOY8OQR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-xH0cwO389BOY8OQR .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-xH0cwO389BOY8OQR rect.text{fill:none;stroke-width:0;}#mermaid-svg-xH0cwO389BOY8OQR .icon-shape,#mermaid-svg-xH0cwO389BOY8OQR .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-xH0cwO389BOY8OQR .icon-shape p,#mermaid-svg-xH0cwO389BOY8OQR .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-xH0cwO389BOY8OQR .icon-shape .label rect,#mermaid-svg-xH0cwO389BOY8OQR .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-xH0cwO389BOY8OQR .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-xH0cwO389BOY8OQR .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-xH0cwO389BOY8OQR :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

float 布局

清除浮动补丁

维护成本上升

Flexbox / Grid 出现

浮动退出布局舞台

仅保留图文环绕

5. 浮动还剩什么价值

说浮动「被放弃」，指的是作为布局方案被放弃，而不是这个属性被删除。它仍然在以下场景中不可替代：

• 图文环绕：shape-outside 配合浮动，可以实现文字沿不规则图形环绕。
• 兼容老浏览器：极少数需要支持 IE 的场景。
• 某些特殊排版：如首字下沉、注释侧栏等。

.circle {
float: left;
width: 160px;
height: 160px;
border-radius: 50%;
shape-outside: circle(50%);
margin-right: 16px;
}

6. 老项目里的浮动代码怎么办

不建议「为了现代化而现代化」地全量重写，可以按优先级处理：

7. 总结

浮动的历史地位毋庸置疑，它让 CSS 在很长一段时间里具备了可用的布局能力。但它的设计初衷是图文混排，用来做布局属于「借用」，因此必然要付出清除浮动、高度塌陷、语义错位等代价。

Flexbox 和 Grid 把这些代价从语言层面消除了，浮动也就顺理成章地退出了布局舞台。理解这段演进，比单纯记住「不要用 float 布局」更有价值——因为技术选型的背后，永远是对成本与收益的权衡。