浮动属性&盒模型

浮动属性：float：left、right、none
    特点
        浮动只能控制元素在水平方向上移动
        浮动会使元素脱离文档流 元素的初始位置不存在 当前元素会漂浮在浏览器的上方
        浮动是会破坏初始的布局方式
        浮动的停止条件
            当元素浮动的时候 碰到父级的包含框就会停止浮动
            当多个元素浮动的时候 默认是左右排列 => 浮动属性碰到前面含有浮动属性的元素也会停止浮动
        注：当子级元素大于父级元素宽度的时候 最后一个子级元素会往下移动 直至找到足够的空间

盒模型：
    组成部分：content+padding+border+margin
    padding：内边距
        作用：设置父级与子级之间的间距
        特点：会撑大当前元素的宽高大小，需要减去相应的padding值
    margin：外边距
        作用：设置同级元素之间的间距
        特点：不会撑大当前元素的宽高大小，不需要减去相应的margin值
    padding、margin方向值：顺时针 上右下左
    
    关于margin的bug：会被浏览器错误解析
        margin-top会错误的解析到父级元素
        两个同级之间的margin会取最大值
    
    内外边距的总结
        相同点：
            都可以设置元素的间距
            方向值写法都是一样

        不同点：
            padding表示内边距 设置了会撑大当前元素的宽高大小
            margin表示外边距 设置不会撑大当前元素的宽高大小

        固定用法：
            *{margin:0;padding:0} 清除浏览器和页面中的所有元素的间距
            版心选择器{margin:0 auto} 版心居中