布局-float布局

布局type

1. 固定宽度
2. 不固定宽度
3. 响应式（pc：固定 手机：不固定）

css type

1. float
2. flew

3. grid

   
   
   图片来源饥人谷网课
   
   

   上图为选用原则

float

1. 子元素加float:left和width
2. 父元素命名为.clearfix,然后

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  border: 1px black solid;}

就可以包住child div了。(注意border分开写)

经验

1. 最后一个子级div留些空间或者不设width。设一个最大宽度就可了。
2. float做不出响应式的，是为了ie设计。
3. ie 6/7有bug，会有双倍margin的情况，解决的方法：

• 将错就错，把margin输入为原来1/2就好。
  *加一个display：inline-block；

4. 图片下面有多余部分：
   
   下面有多出来的
   
   加上vertical-align:top;就好了。
5. 有时候无法居中对应：奇数px高度的素材与偶数px高度的无法对应的。
6. 可以用outline代替border调试，因为border会增加素材的宽度和高度，eg一个1px border的素材width设置成100px，但是实际有102px。
7. 块元素居中：```
   margin-top:"auto";
   margin-left:"auto";

8. 素材的宽度以及他们的间距：列方程试出来一个不是小数的就可了
9.负margin使用技巧

可以看到child的width为100px，margin是20px,如果没有负margin，就会这样。
![这里的负margin没有写全px不生效的](https://upload-images.jianshu.io/upload_images/19247518-c054dd6e18af05b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以看到明明3*100+20*2是340，但是容纳不下，这就是这样的。所以要使用负margin来进行容纳。
![负的margin-left](https://upload-images.jianshu.io/upload_images/19247518-852a7855d08a6a9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以看到加了之后容纳下来了。
具体使用方法：
在父子元素中间再加一个元素，让他不仅是clearfix，而且还是命名为demo，然后对这个x进行

.demo{
float: left;
margin-left: -20p;
}

就OK了。