结论

可维护布局的第一原则是不到万不得已不写死 width 和 height，优先用 calc、flex 这类让浏览器自己算的语法。第二是布局层与内容层分离——负责布局的 div 只做布局，内容另起一个 div 写。

最后更新：2026-09-17 · 基于 基于 float 与 flex 两套方案，含桌面端与移动端完整示例

六、布局套路

原则

  • 不到万不得已，不要写死 width 和 height
  • 尽量用高级语法，如 calc、flex
  • 如果是 IE，就全部写死
  • 布局的div只用来做布局，内容新建一个div去写

布局方式

  • 需要兼容IE8：

float布局： 定宽

  • 不需要兼容IE8：

flex布局：弹性宽度

float布局

  1. 给子元素加：float: left或float:right
  2. 父元素清除浮动：clearfix
  3. 如果宽度不够，可以用 margin: 0 -4px;
1
2
3
4
5
6
7
8
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;
}

flex布局

  1. 父元素加display:flex
  2. 父元素加justify-content: space-between;
  3. 如果宽度不够，可以用 margin: 0 -4px;

写一个页面

pc端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
+-------------------------------------------------------+
|                                                       |
| +--------+                 +----+ +----+ +---+ +----+ |
| | logo   |                 | 菜单| |菜单| |菜单| |菜单 | |
| +--------+                 +----+ +----+ +---+ +----+ |
|   +-----------------------------------------------+   |
|   |                                               |   |
|   |        banner                                 |   |
|   |                                               |   |
|   |                                               |   |
|   |                                               |   |
|   +-----------------------------------------------+   |
|                                                       |
|   +--------+  +---------+  +---------+  +---------+   |
|   |        |  |         |  |         |  |         |   |
|   |        |  |         |  |         |  |         |   |
|   +--------+  +---------+  +---------+  +---------+   |
|   +--------+  +---------+  +---------+  +---------+   |
|   |        |  |         |  |         |  |         |   |
|   +--------+  +---------+  +---------+  +---------+   |
|                                                       |
|   +------------+  +-------------------------------+   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   |            |  |                               |   |
|   +------------+  +-------------------------------+   |
|                                                       |
+-------------------------------------------------------+

手机端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+-----------------------------+
| +--------+           +----+ |
| |        |           |----| |
| +--------+           +----+ |
| +-------------------------+ |
| |                         | |
| |                         | |
| |                         | |
| +-------------------------+ |
|  +--------+  +----------+   |
|  |        |  |          |   |
|  |        |  |          |   |
|  +--------+  +----------+   |
|  +--------+  +----------+   |
|  |        |  |          |   |
|  +--------+  +----------+   |
|  +--------+  +----------+   |
|  |        |  |          |   |
|  +--------+  +----------+   |
+-----------------------------+

桌面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<body>
  <style>
    * {box-sizing: border-box;}
    .clearfix:after{content: ''; display: block; clear:both;}
    .clearfix {zoom: 1;} /*IE6*/
    
    .parent {border: 1px solid; padding: 5px;
      background: #ddd; text-align: center; min-width: 600px;
    }
    .logo {border: 1px solid;
      background: black; color: white; width: 70px;
      line-height: 36px;
    }
    .menu > div {border: 1px solid; 
      line-height: 36px; margin-left: 10px;}
    
    .banner {
      border: 1px solid; width: 600px; height: 200px;
      margin: 10px auto 0 auto; background: #ccc;
    }
    .pictures { width: 600px; margin: 10px auto 0 auto; }
    .middle { margin: 0 -20px; }
    .picture {
      width: 120px; height: 80px;  background: red;
      border: 1px solid;
    }
    
    /*使用float布局*/
    /* .pic-float { float: left; margin: 20px; } */
    
    /*使用flex布局，这种如果一行有三个，那么也是左对齐*/
    .pictures-flex { display: flex; flex-wrap: wrap; }
    .pic-flex { margin: 15px; width: calc(25% - 30px); margin-bottom: 10px; }
    .middle { margin: 0 -15px; }
    
    /*使用flex布局，这种的一行必须4个， 否则会两边对齐，*/
    /* .pictures-flex {
      display: flex; flex-wrap: wrap; justify-content: space-between;
    }
    .pic-flex { width: 130px; margin-bottom: 10px; } 
    .middle { margin: 0; } */
    /*广告*/
    .art { border: 1px solid; margin: 0 auto; width: 600px; }
    .one {
      height: 200px; border: 1px solid; background: #aaa;
      width: calc(33.3% - 20px); margin-right: 20px;
    }
    .two {
      height: 200px; border: 1px solid; background: #eee; width: 66.66%;
    }
    /*使用float布局*/
     /* .art >div { float: left; } */
    /*使用flex布局*/
    .art { display: flex; }
  </style>
  <div class="parent clearfix">
    <div class="logo" style="float: left">logo</div>
    <div class="menu clearfix"style="float: right">
      <div style="float: left">菜单1</div>
      <div style="float: left">菜单2</div>
      <div style="float: left">菜单3</div>
      <div style="float: left">菜单4</div>
      <div style="float: left">菜单5</div>
    </div>
  </div>
  <div class="banner"></div>
  
  <div class="pictures clearfix">
    <div class="middle  pictures-flex">
      <div class="picture pic-float pic-flex"></div>
      <div class="picture pic-float pic-flex"></div>
      <div class="picture pic-float pic-flex"></div>
      <div class="picture pic-float pic-flex"></div>
      <div class="picture pic-float pic-flex"></div>
      <div class="picture pic-float pic-flex"></div>
      <div class="picture pic-float pic-flex"></div>
      <!-- <div class="picture pic-float pic-flex"></div> -->
    </div>
  </div>
  <div class="art clearfix">
    <div class="one">广告1</div>
    <div class="two">广告2</div>
  </div>
</body>

add不能作为CSS类名， 因为很有可能被广告屏蔽软件屏蔽。

手机布局

代码在上面的基础上加了一些，

  • CSS样式加载上面代码的后面，这样当切换手机浏览时，后面的样式覆盖前面，就应用手机布局。
  • 上面的菜单加了一个按钮，当手机上浏览时，PC上的菜单影藏，改成按钮显示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .parent .menu2 {display: none;}
    @media (max-width: 420px) {
      * {margin: 0; padding: 0;}
      .parent {min-width: auto;}
      .parent .menu {display: none;}
      .parent .menu2 {display: block;}
      .banner {width: auto;}
       /*这里使用overflow是因为图片的div宽度大于屏幕宽度了，所以加上了hidden*/
      .pictures { width: auto; overflow: hidden;}
      .pic-flex { width: calc(50% - 30px);}
      .art { width: auto; flex-direction: column;}
      .one,.two { width: auto; margin: 0;}
    }
  </style>
<div class="menu2">三</div>
<!-- http://js.jirengu.com/qucof/12/edit?html,output -->

布局切换的时候，宽度变化的时候，想要图片不变形，那么久不要用img标签。使用 背景图片。

1
2
3
4
div {
    background: transparent url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3591147451,1203661331&fm=27&gp=0.jpg) no-repeat center;
      background-size: cover;
}

如果非要全显示搜索固定比例div

常见问题

为什么布局时不要写死宽高

写死尺寸的布局在换字号、换语言、内容变长时都会崩。用 calc、flex、百分比让浏览器按剩余空间计算，才能适应内容变化。只有在确实需要固定尺寸的地方（图标、边框）才写死。

float 布局和 flex 布局现在该选哪个

新项目一律用 flex。float 本来是为文字环绕设计的，用来做多列布局需要清除浮动、处理父元素高度塌陷，都是额外负担。只有在必须兼容非常老的浏览器时才退回 float。

为什么说布局的 div 只用来做布局

布局容器一旦同时承担内容样式，改动就会互相牵连——调间距会影响文字、改字号会撑破格子。把结构和内容分成两层，各自的样式互不干扰，后期维护成本低很多。