布局分类一般分为两种

• 一种是 固定宽度布局， 一般宽度设置为 960 / 1000 / 1024px

• 另一种是不固定宽度布局，主要靠文档流的原理来布局

1. float布局(不要用在手机页面)

例子

1. 在子元素上加 float:left/right和width

2. 在父元素上加.clearfix

.clearfix::after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

• 用 float 做两栏布局（如顶部条）
• 用 float 做三栏布局（如内容区）
• 用 float 做四栏布局（如导航）
• 用 float 做平均布局（如产品展示区）

float布局实例

代码链接

• 技巧： margin-right: -12px

用 float 的一些经验

1. 会留一些空间或者最后一个不设置width
2. 不需要做响应式，因为手机上没有IE
3. IE 版本6/7 存在双倍 margin 的 bug,

• 解决方法一：将margin 减半
• 方法二： 加display:inline-block

如果发现图片下面有多余的东西，加上下面的代码在图片上就可以了 ,至于为什么可以看此链接

vertical-align:top/middle

2. flex布局

将container称之为容器，将容器变成flex容器，容器里面的内容称之为items

flex布局下容器里items的流动方向属性

1. order | items的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>（整数）;
}

2. flex-grow | 项目放大比例，默认为0，即如果存在剩余空间，也不放大。

通过数字来改变其在容器内占的剩余空间，数值越大占的空间越多
.item {
 flex-grow: <number>; 
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3. flex-shrink | 项目缩小比例，默认为1，即如果空间不足，该项目将缩小。

数值为0时，表示不要缩小我，数值越大贡献的越多
 .item {
   flex-shrink: <number>;
 }

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4. align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式

align-self:flex-start;
align-self:flex-end;

3.grid布局

在父容器加上display:grid就可以使用这个布局了

行和列