选择要不要支持ie8+；

要支持ie：浮动布局；
不支持ie：Flex布局；

1、要支持ie8+；浮动布局

参考官网： 锤子官网
先从逻辑上写通html
再调整css

1、第一个知识点：全部用ul等有意义的写，不要都用div；可以用div包起来；li上面不要加class；
2、第二步：写logo，实在想不到好的标签，用div；
3、html顺序与css顺序一样；
4、先写通html，再调整css；

5、在每一块上加上左浮动float:left;
6、在他们的最外层加上爸爸层，爸爸曾加上一个类class 清除浮动

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

给这个爸爸层一个边框，可以看到，在加入clearfix之前边框是0，加入后，边框高框起来了下面内容

7、精准测量大小啥的：先写上后删除
8、在爸爸身上写上总的宽度（这时候需要引入,否则会不够宽）

*{
      margin:0;
      padding:0;
    }

1.2正式总结
1、在儿子加float:left; 最后加上right
2、写clearfix ,加到爸爸身上（直接爸爸身上就得加，爷爷加了不算）

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

支持ie： 一个:
不支持ie：两个:
3、给儿子调宽度

例子

2、Flex 浮动布局

待续。。。