1.盒模型
什么是盒模型，每一个盒子都是由：内容区(content),填充区(padding),边框(border),外边界区(margin),四个部分组成
2，盒子模型共有两种：
分为标准模型和怪异模型
标准模型：标准模型是很标准的计算一个盒子的区域
一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异模型：只是大概分析了盒子，
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）
3.标准和怪异的转换
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值
两种边距重叠的情况：
1.父子关系的边距重叠
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距
解决方法：可以给父元素添加overflow：hidden
1、为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子元素浮动引起的内部高度为0的问题
就是在不给父盒子加高的情况下，内部盒子会撑起父盒子，
当给子盒子浮动后，父盒子因为没有高而变为0
清除浮动的方法（最常用的四种）
一、额外标签法：给谁清除浮动就在其后面添加空白标签
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差
二、父级元素添加overflow方法：
可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点： 简单、代码少、浏览器支持好
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏
三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点： 由于IE6-7不支持：after，使用zoom：1
使用before和after双伪元素清除浮动：（较常用推荐）
父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点： 简单、代码少、容易掌握
缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题