浮动

1 标准文档流：

    定义：web 网页的制作，是个“流”，从上而下。
    1.空白折叠现象
        多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，在一行内写img标签则没有此现象。
    2.高矮不齐，底边对齐
        文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
    3.自动换行，一行写不满，换行写
        如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

2 浮动

float: none left right
特性：
    1.浮动的元素脱标
    2.浮动的元素互相贴靠(并排紧靠)
    3.浮动的元素由"字围"效果
    4.收缩的效果（没有设置width，那么就自动收缩为文字的宽度）

清除浮动:(浮动会给页面带来混乱)
    1.给父盒子设置高度
    2.clear:both left right
    3.伪元素清除法
        给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
            .clearfix:after{
                /*必须要写这三句话*/
                content: '.';
                clear: both;
                display: block;
            }
    4.overflow：hidden
        visible    默认值。内容不会被修剪，会呈现在元素框之外。
        hidden    内容会被修剪，并且其余内容是不可见的。
        scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
        auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
        inherit    规定应该从父元素继承 overflow 属性的值。

3 margin的塌陷

          两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，小的那个被覆盖。

         解决：

                 给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。

4 margin: 0 auto

         div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;      //必须要设置width
                        /*水平居中文字*/
            text-align: center;
        }

5 善用父亲的padding

父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了，一旦给父亲一个border就好了。

我们不可能在页面中无缘无故的去给盒子加一个border，所以使用父亲的padding，让子盒子挤下来。