float布局

步骤：

子元素上加 float:left, 和width
父元素加上 .clearfix
- 父元素加上class: class="clearfix"
- .clearfix的写法：

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

一些经验：

最后一个子元素不设置width，或者设置max-width
img 设置Max-width
如果图片下面有多余的空白，就在图片上写上 vertical-align: top或者middle
如果border干扰了布局，可以用outline: 1px solid red, outline不占用位置
固定元素的块级元素居中的方法：写上margin: 0 auto; 或者margin-left: auto; margin-right: auto;(比前者好，因为没有影响上下的Margin)
平均布局的关键点：负Margin 例子：
jsbin.com/cexigawoka/…

float布局需要手动计算宽度，比较麻烦，所以可以用flex布局

flex布局

align-items: stretch; 即使内容高度不一样，也让item的高度一样

item的属性：

order：默认是0
- 按照order从小到大的顺序排
- 负数、0、正数
flex-grow
- • 使用技巧：三栏布局时，两边的不设置，中间的设置flex-grow:1. 实战分析：

想让导航栏去到右边有两种写法 1.在父元素上设置justify-content:space-between; 2.或者在导航栏上写margin-left: auto 在写平均布局时，即使用Justify-content：space-between也无法满足要求：

所以我们还是需要用到负margin，首先在Image上加上一个wrapper div

然后再加上负Margin，负Margin的值就是每个Image的Margin-right的值

.imageList > .wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
}

预览地址：
js.jirengu.com/hiwalumapu/…

grid布局

grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 60px 400px 200px;
表示5列3行
用法展示：
js.jirengu.com/yuwifamowe/…
fr的用法：
js.jirengu.com/zokevujila/…
用fr来实现平均布局，就不在需要写负Margin了
js.jirengu.com/somodiyoda/…
grid用法总结：
1.用grid-template-areas 设计大致的布局

 grid-template-areas:
    "big mid1"
    "big mid2"
    "sm1 mid2"
    "sm2 mid3"
    "sm3 mid3"

2.用grid-template-rows和grid-template-columns指定每一行每一列的高度和宽度

grid-template-rows: 240px repeat(4, 120px);
grid-template-columns: 250px 250px; 3.对于每一个小块，用grid-area和grid-template-areas 里布局的字符串对应
实例：

.demo > .image:first-child{
  grid-area: big;
  border: 1px solid red;
}

grid尤其适合用来做不规则布局
假设我们想做以下布局：

代码示例：
js.jirengu.com/qififesuga/…

CSS布局

float布局

flex布局

grid布局