divcss布局实例代码

写页面的布局时候，float 和 position 这两个属性用好了，实例大部分布局都能搞定。代码但很多人一上来就想着 Flexbox、布局Grid，实例结果遇到老项目或者需要兼容 IE 的代码场景就傻眼了。我上周帮同事改一个后台管理系统的布局侧边栏，他用了 flex，实例结果在某个旧版浏览器上直接塌成一列。代码后来换成 float 加 clearfix，布局五分钟解决。实例

先看一个最基础的代码 div+css 布局。两栏结构，布局左边固定宽度，实例右边自适应。代码HTML 长这样：

<div class="container"> <div class="sidebar">侧边栏</div> <div class="main">主内容区</div> </div> 

CSS 部分：

.container {  overflow: hidden; /* 触发 BFC，清除浮动影响 */ } .sidebar {  float: left; width: 200px; background: #f0f0f0; } .main {  margin-left: 220px; /* 200px 宽度 + 20px 间距 */ background: #fff; } 

这里有个细节：sidebar 浮动后，main 如果不设 margin-left，文字会环绕到 sidebar 下方。margin-left 的值必须大于 sidebar 的宽度，否则会重叠。我习惯留 20px 间隙，视觉上舒服些。

三栏布局稍微麻烦点。左右固定，中间自适应。HTML：

<div class="container"> <div class="left">左侧</div> <div class="right">右侧</div> <div class="center">中间内容</div> </div> 

注意顺序：left 和 right 先写，center 放最后。CSS：

.left {  float: left; width: 150px; background: #e0e0e0; } .right {  float: right; width: 150px; background: #e0e0e0; } .center {  margin-left: 160px; margin-right: 160px; background: #fff; } 

为什么 center 不浮动？因为浮动元素会脱离文档流，如果 center 也浮动，它不会自动撑满剩余空间。用 margin 把左右两侧的空间让出来，center 自然就填满了中间区域。这个技巧在 2010 年前后的网站里到处都是，比如早期的淘宝页面。

浮动布局最大的坑是父容器高度塌陷。比如上面那个 container，如果里面所有子元素都浮动，container 的高度会变成 0。解决办法有三个：给 container 加 overflow: hidden；或者用 clearfix 伪元素；或者干脆在最后加一个空 div 设 clear: both。我一般用 clearfix，干净。

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

再说定位布局。position: absolute 配合 relative 父级，能做很多浮动做不到的事。比如一个卡片右上角的角标：

.card {  position: relative; width: 300px; height: 200px; border: 1px solid #ccc; } .badge {  position: absolute; top: 10px; right: 10px; background: red; color: white; padding: 2px 8px; border-radius: 10px; } 

这里 .card 必须设 position: relative，否则 .badge 会相对于最近的定位祖先（可能是 body）来定位，跑到页面角落去。这个错误我见过太多次，尤其是刚学 CSS 的人。

还有一种常见需求：底部固定页脚。用 position: fixed 最简单，但会遮住内容。更好的做法是给 body 加 padding-bottom，或者用 flex 布局。不过今天只聊 div+css 传统方案，那就用绝对定位加最小高度：

html, body {  height: 100%; margin: 0; } .wrapper {  position: relative; min-height: 100%; padding-bottom: 60px; /* 页脚高度 */ } .footer {  position: absolute; bottom: 0; width: 100%; height: 60px; background: #333; } 

注意 min-height: 100% 需要父级 html 和 body 都有 height: 100%，否则百分比高度不生效。这个链式依赖很烦人，但没办法，CSS 规范就这么定的。

最后说一个我踩过的坑：浮动元素和 margin 折叠。两个相邻的浮动元素，它们之间的 margin 不会合并，但浮动元素和普通流元素之间的 margin 会出问题。比如 sidebar 浮动，main 不浮动，main 的 margin-top 可能会把整个容器往下推。解决方法是给 container 加 overflow: hidden 或者用 padding 代替 margin。

写布局代码，多打开开发者工具看盒模型。颜色标出来的 margin、border、padding 一目了然。比盯着代码猜快多了。