DIV+CSS布局核心原理与实战技巧：浮动、定位、Flex与Grid选型指南

接手过一个老项目，打开样式文件全是一水儿的float:left、position:relative，当时第一反应是这代码该重写了。可等我把业务逻辑啃完才发现，这些老布局其实稳稳当当地跑了好多年，该自适应的时候自适应，该换行的时候换行，除了维护起来费点眼，并没有想象中那么不堪。

其实这恰恰说明，DIV+CSS 里的「DIV」是结构，「CSS」是造型，而浮动、定位这些属性就是让页面元素按我们想法各就各位的基础工具。我一直觉得，不管现在 flex 和 grid 多香，浮动与定位的底层逻辑仍然是必须掌握的东西。这篇就把 DIV+CSS 布局的整体思路、核心属性、常见布局类型，以及我这些年踩坑踩出来的实用技巧一次说清楚，适合刚接触前端的初学者，也适合那些一直在用框架、但很少回头看原生 CSS 的开发者。

1. DIV+CSS 布局的核心思路与底层逻辑

1.1 为什么叫 DIV+CSS，而不是「网页布局」

先扯个背景。早年网页布局用表格table非常普遍，一个页面经常是table套table，改一列宽度能把人看晕。后来大家发现，把表现和结构分开会更灵活，于是div这个无语义的块级容器配合 CSS 样式成了主流，慢慢就有了「DIV+CSS 布局」这个叫法。

时至今日，HTML5 已经给了我们header、main、footer、section等语义化标签，严格说再用「DIV+CSS」这个词已经不完全准确。但你随便打开一个后台管理系统的模板，十有八九还是div满天飞。为什么？因为div就像一块空白积木，没有默认样式，没有语义包袱，你想让它充当什么角色都行。CSS 负责给它宽高、内外边距、浮动、定位，最终拼出一个符合设计稿的页面。

理解这件事有个好处：当你遇到.container、.wrapper、.row、.col这类命名时，不用纠结它们到底是不是div，只要抓住「它们都是布局容器」这个本质就行了。真正决定元素位置的是盒模型、文档流、浮动和定位。

1.2 布局三要素：盒子模型、文档流、包含块

我在带人的时候反复强调：CSS 布局的第一课不是 flex，也不是 grid，而是盒子模型。每一个元素在页面上都会被渲染成一个矩形盒子，从内到外依次是内容区（content）、内边距（padding）、边框（border）和外边距（margin）。

实际项目里最容易被坑的，就是宽度计算。默认盒模型下，width: 300px只指定内容区宽度，如果再给padding: 20px、border: 2px，这个元素实际占用的宽度就是300 + 20*2 + 2*2 = 344px。所以很多老项目一上来就是全局重置：

* { box-sizing: border-box; }

让width直接包含 padding 和 border，这样写布局时心智负担会小很多。虽然通配符选择器确实有性能上的小开销，但对现代浏览器来说可以忽略，用它的好处远大于坏处。

第二个底层概念是文档流。正常情况下，块级元素从上往下排，行内元素从左往右排，这就是普通流。float和position: absolute会让元素脱离普通流，这也是布局发生重叠、错位、塌陷的根源。第三个是包含块，简单理解就是一个元素的定位参照物，absolute定位往哪个方向偏移、百分比宽度按谁计算，都取决于包含块是谁。后面定位这一章会专门展开。

2. 浮动（Float）属性详解与清除浮动实战

2.1 float 到底在干什么

很多新手以为float是专门用来做页面布局的，其实它最早的设计初衷是让文字环绕图片。在报纸排版里，图片左边一张、右边一张，文字会绕着图片排过去。网页里的float: left就是让元素向左浮动，后面的内容、文字会从它的右侧绕过去。

这一特性后来被用在了多列布局上：给左边的侧边栏float: left，再给右边的主体内容float: left，两个盒子就能并排。但浮动有个非常折磨人的副作用：父容器不再认为浮动的子元素还在「站队」里，于是父元素高度会塌陷。我最初接手项目时看到一堆<div style="clear:both"></div>就是当时流行的做法。

要彻底理解浮动，记住三句话：浮动元素脱离普通流但保留部分参与文本流；浮动元素会向左或向右靠拢，直到碰到父容器边缘或另一个浮动元素；浮动元素会让其父容器的高度失去对它的感知。

2.2 清除浮动的几种方式

既然浮动会导致父容器塌陷，那就要「清除浮动」。网上方案很多，我自己最推荐用伪元素的方式，不增加多余 DOM 节点，代码也干净：

.clearfix::after { content: ""; display: block; clear: both; }

只要给需要包裹浮动子元素的父容器加上clearfix这个类，父容器就能重新把浮动子元素的高度计算进来。原理其实不复杂：clear: both表示元素左右两边都不能出现浮动元素，这个伪元素被排到所有浮动子元素的下面，硬生生把父容器的高度「撑」回来。

还有种常见方式是给父容器加overflow: hidden，也能触发 BFC（块级格式化上下文）让父容器包住浮动元素。但它有隐患：一旦父容器里出现需要溢出的内容，比如下拉菜单，就会被裁掉。所以我只在确定不会有溢出内容时才用。

2.3 一个浮动两栏布局小示例

假设要做一个左侧 220px 固定、右侧自适应的两栏布局，最传统的写法是这样的：

<div class="wrap clearfix"> <div class="sidebar">侧边栏</div> <div class="main">主内容</div> </div>

.wrap { max-width: 1200px; margin: 0 auto; } .sidebar { float: left; width: 220px; background: #eee; } .main { float: left; width: calc(100% - 220px); background: #fafafa; }

这里我给右侧同样用了浮动。如果不给右侧浮动，它默认会占满整行，但内容区域会从侧边栏右侧开始绕排，文字排列没问题，背景和边框却会铺满整个父容器宽度，看起来像是布局错乱。用calc()计算剩余宽度时，要注意运算符两边必须有空格，否则某些浏览器会识别失败。

浮动布局虽然老，但并没有彻底退休。很多邮件客户端对 flex 和 grid 支持不好，写邮件模板时依然要靠 table 和 float 撑场面。将来你遇到这类需求，浮动就是救命稻草。

3. 定位（Position）属性：从相对到粘性

3.1 五种定位值详解

定位属性position是布局里跟浮动并列的核心。它的取值分别是static、relative、absolute、fixed和sticky。我给新手的解释方式很简单：

• static：默认值，元素就在文档流里老老实实待着。
• relative：元素还在文档流里，原来的位置保留，但可以通过top、right、bottom、left让它相对于原本位置移动。移动后原来占的位置不会空出来，其他元素不会被挤动。
• absolute：元素彻底脱离文档流，相对于最近的「已定位」祖先元素定位。如果祖先都没有定位，就相对初始包含块（通常是浏览器窗口）定位。
• fixed：脱离文档流，相对于视口定位，页面滚动时它纹丝不动。典型应用是吸顶导航和悬浮按钮。
• sticky：这是一个相对新一点的值，元素先按普通的文档流排列，滚动到指定阈值后就被「粘」在某个位置，相当于relative和fixed的结合体。

举个例子，一个返回顶部的按钮通常就这么写：

.back-top { position: fixed; right: 20px; bottom: 40px; width: 48px; height: 48px; z-index: 99; }

sticky这些年浏览器支持已经相当好，用来做吸顶表头很方便：

.table-header { position: sticky; top: 0; }

要注意的是，sticky的父容器必须有足够的高度供它「粘」，而且它不能是父容器的最后一个子元素，否则没有滚动余量。

3.2 定位元素的层级与包含块

用absolute最常犯的错是：明明写了对的left和top，元素却跑到了浏览器左上角。原因多半是它找不到一个已定位祖先。所以标准做法是：

.modal-wrap { position: relative; } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

relative在这里的意义不是为了让模态框自己动，而是给内部的absolute元素提供一个包含块。这个技巧在写弹窗、菜单、气泡提示时非常常用，也是后台页面的高频需求。

z-index是另一个容易迷惑的点。它不是简单按数值大小排优先级，还要看元素是否创建了层叠上下文。position: relative配合z-index: 1就能让某个元素盖过另一个没定位的兄弟元素。但如果两个父级各自形成了层叠上下文，子元素的z-index只能在各自的父级上下文里做比较。所以页面里没事别轻易给太多元素加position和z-index，否则后面弹窗层级会越来越难控制。

3.3 弹窗与遮罩的实现

一个最常见的div弹窗结构是遮罩层加弹窗主体。遮罩要求覆盖全屏，弹窗要求居中显示并盖在遮罩上面：

<div class="mask"> <div class="dialog">这是弹窗内容</div> </div>

.mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; } .dialog { width: 320px; padding: 24px; background: #fff; border-radius: 8px; }

inset: 0是top/right/bottom/left的简写，遮罩层被拉伸到视口每个角落。再把display: flex放到遮罩层上，弹窗就能水平和垂直同时居中，不用再靠transform去猜。这个写法兼容性和可读性都不错，我现在依然推荐。

4. 布局类型：传统布局、Flex 与 Grid 该怎么选

4.1 传统 DIV+CSS 布局：固定宽度与流式布局

传统布局大致可以分成固定宽度和流式两种。固定宽度布局喜欢用width: 1200px; margin: 0 auto把整个页面框在中间，设计时按桌面端来，简单直接，但在小屏上会出现横向滚动条，体验比较差。流式布局则用百分比宽度，比如左侧25%、右侧75%，窗口变大变小，元素跟着变，但尺寸在小屏下又会变得很难控制。

后来流行过一段时间的「响应式布局」，本质还是这两类布局思想的延伸，只不过用@media媒体查询在不同断点下切换布局规则。我在老项目里经常见到这种写法：

@media (max-width: 768px) { .sidebar { float: none; width: 100%; } .main { float: none; width: 100%; } }

这样小屏下两栏会变成上下堆叠，视觉上不会有挤压问题。今天再做这类布局，我更建议直接上 flex 或者 grid，但理解百分比和浮动的关系，对排查旧项目依然很有用。

4.2 Flex 布局：一维排列的救星

Flex 布局（弹性盒子）解决的是「在一条线上怎么摆」的问题，它替代了大量过去用浮动和 inline-block 硬凑的写法。核心思路是给父容器设置display: flex，子元素自动变成弹性项目，排列方式由flex-direction决定。

.card-list { display: flex; gap: 16px; flex-wrap: wrap; } .card { flex: 1 1 240px; }

flex: 1 1 240px表示项目基础宽度 240px，可以放大也可以缩小，有多余空间时大家按比例分，空间不足时自动换行。用gap设置间距，比挨个设置margin省事得多，还能避免最后一个元素的右边距多出来。

做两栏自适应布局时，flex 也远比浮动直观：

.layout { display: flex; } .sidebar { width: 220px; flex-shrink: 0; } .main { flex: 1; }

flex-shrink: 0保证了侧边栏不会被压缩。右侧只需要写flex: 1，就能把剩余空间全部吃掉。这种代码读起来基本不用过脑子，所以我跟新人讲布局，都是先讲 flex 再补 float 和 position。

4.3 Grid 布局：二维平面直接画格子

Grid 是真正为二维布局而生的。它把容器划分成行和列，子元素可以直接放进对应的格子。如果你要做一个三行两列的卡片面板，用 flex 需要各种嵌套和换行控制，用 grid 却只需几行：

.dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

repeat(3, 1fr)表示三列等分，1fr是剩余空间的一等份。想要侧边栏宽 220px、剩余给主区域，可以写：

.app-layout { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }

这算是 admin 后台最常见的整体骨架：左边固定侧边栏，右边顶部导航加内容区，底部分栏自动撑满。Grid 在二维规则的页面结构里属于降维打击，但如果你只是想让一个按钮组水平居中，用 grid 就有点大材小用了。

我做一个简单的对比表：

5. 常见布局技巧整理：从水平垂直到粘性底部

5.1 水平垂直居中的三种经典方式

「怎么把 input 居中」几乎是知乎上问烂了的问题。先说结论：要看它的父容器是不是设置了高度、它是行内元素还是块级元素，不能套一个万能答案。

第一种，绝对定位加 transform：

.parent { position: relative; height: 300px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

这种方式不关心子元素宽高，但transform会创建层叠上下文，如果子元素里面有 fixed 定位的内容，可能会受影响。

第二种，Flex 居中：

.parent { display: flex; align-items: center; justify-content: center; }

这算是我目前最常用的方式，简单、可靠、不破坏文档结构。input 里直接套居中同样适用。

第三种，Grid 居中：

.parent { display: grid; place-items: center; }

place-items: center是align-items: center和justify-items: center的简写。Grid 居中代码量更少，但浏览器要求更高一点，现代项目完全可以用。

5.2 左右两栏与中间自适应

除了上面提到的 flex 写两栏，还有一种古老的「圣杯布局」或者「双飞翼布局」，目标都是中间列优先加载并且自适应，左右两列固定宽度。用 float 实现时，中间列的 DOM 要放在最前面，同时用负 margin 把它拉回正常位置，理解成本很高。

现在用 flex 做兄弟布局就清爽多了。左边和右边固定宽度，中间flex: 1，甚至两边都可以根据内容自动收缩。我实际写页面时会加一行min-width: 0到中间列，防止里面的长文本或表格把 flex 子项撑破，这是很多人容易忽略的。

5.3 吸底 Footer 与页面高度问题

很多后台页面的布局是：头部、内容、底部三块，希望内容不足一屏时，底部仍然贴着视口底部。传统做法需要算min-height，现在用 flex 或 grid 轻轻松松：

html, body { height: 100%; } .page { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; }

min-height: 100vh保证页面容器至少和视口一样高，内容区域flex: 1再去挤占剩余空间，底部自然被推到页面最底。这套方案在移动端也适用，只要注意不要给 body 额外加height: 100%导致某些浏览器滚动异常即可。

另外一个小技巧：很多页面顶部是position: sticky的吸顶导航，滚动时希望它吸附在视口顶部。给导航加position: sticky; top: 0; z-index: 100;就够，不需要用 JS 监听滚动事件。这个属性对父容器层级有要求，如果中间隔了overflow: hidden，吸附就会失效，需要把overflow放在导航容器外层而不是祖先上。

5.4 用状态伪类切换布局观感

布局并不只是静态的。常见的菜单展开、按钮悬停变色，背后其实是「CSS 鼠标移入事件」这类状态伪类在起作用。比如一个下拉菜单，过去要写一大串 JS，现在只需要：

.nav-item:hover .dropdown { display: block; } .dropdown { display: none; }

在移动端上hover的行为不稳定，所以更稳的做法是配合focus-within：

.dropdown-wrap:focus-within .dropdown { display: block; }

这个属性在今天已经相当普及，用来做纯 CSS 的展开折叠、Tab 切换都很合适。布局不光是写死的位置，利用状态改变元素的display、visibility、transform，会让页面交互层次丰富起来。

6. 布局错乱问题排查手册

6.1 绝对定位的父级不是父级

症状：子元素position: absolute; top: 10px，结果它跑到了浏览器窗口某处，而不是父元素左上角。原因几乎都是父元素没有设置position: relative。排查方法很简单，在浏览器开发者工具里选中子元素，看它的「包含块」区域到底是谁。修复时在父元素上加position: relative即可。如果父元素本身也要随滚动移动，加relative不会对它产生明显的副作用，所以很多团队干脆把布局容器一律设置成position: relative。

6.2 flex 子项被压缩与换行问题

症状：一行放了四个卡片，到了小屏上每个卡片都挤成了细条，或者高度被压扁。原因很可能是子项默认的flex-shrink: 1在起作用。解决方式：

• 不需要压缩的固定栏目，加flex-shrink: 0。
• 希望多个子项按比例缩放，用flex: 1 1 0%或者flex: 1。
• 希望自动换行，让flex-wrap: wrap开启，并给子项设置合理的基础宽度。

flex 的默认行为里，flex: 0 1 auto其实是「不放大、可缩小、以内容为基准」。新手看到元素宽度总和自己设定不一致，八成是没搞懂这三个值的组合方式。

6.3 浮动高度塌陷与重叠

症状：父容器背景没有包住浮动的子元素，或者后面一个模块跑到了浮动元素后面、甚至叠到了一起。要么给父容器加clearfix，要么用overflow: hidden触发 BFC。如果用户遇到的是两个浮动模块之间的间距不对，多半是父容器宽度不够、或某个子元素的margin穿过了父容器边界，需要给父容器加overflow: hidden或者padding。浮动布局里，负 margin 的使用要格外谨慎，它能让元素叠在一起，也最容易引发错乱。

6.4 布局错乱速查表

以下是我在实际项目中整理出来的一张排查速查表，遇到问题可以按症状对号入座：

6.5 关于布局重叠与输入框居中的补充

「布局重叠」这个词我在排查时经常遇到，很多情况下是absolute定位的元素互相盖住。我的建议是，能用 flex 和 grid 排的位置，就不要轻易用绝对定位去「硬摆」。绝对定位更适合弹窗、角标、悬浮按钮这类脱离文档流场景。如果一个页面里绝对定位的数量超过了五个，说明布局思路可能出了问题，需要重新设计结构。

至于 input 居中，其实要区分两层：input 居中的是它那一个盒子，还是它相对父容器居中。前者把 input 设置成块级后加margin: 0 auto，或者直接给父容器text-align: center，因为 input 默认是行内块元素，可以被文本对齐属性影响。后者刚才已经说过，用 flex 或 grid 都能解决。别为了一个居中写十几行 CSS，简单问题要用简单方案。

我个人的习惯是，新项目默认 flex 为主、grid 做骨架、position 处理浮动层、float 只在必须兼容老客户端时才碰。但我也绝不会删掉老项目里那些好看的浮动写法，因为「能用」和「好维护」有时候是两回事。布局的最终目标从来不是炫技，而是让页面在不同屏幕、不同交互状态下都表现稳定。每次布局错乱，问题的答案几乎都藏在这几个基础属性里，把它们吃透，比收藏一百个工具函数都管用。