1、元素的显示模式
    1、块元素：
    1)无论内容多少，该元素都独占一行。
    2)高度、宽度以及内外边距都可以控制。
    3)宽度默认是容器的100%。
    4)是一个容器，里面可以放行内元素或者块级元素。
    2、行内元素
    1)相邻行内元素在一行上，一行可以显示多个
    2)高、宽直接设置是无效的
    3)默认宽度就是它本身内容的宽度
    4)行内元素只能容纳文本或其他行内元素
    3、元素模式转换：
    display:block; 转换成块元素
    display:inline-block; 转换成行内块元素
    特点：不自动换行、能够识别宽高、默认排列方式从左到右
    display:inline; 转换成行内元素
    display:none; 隐藏元素
    2、浮动
    1、定义：
    将浮动盒子移动到父元素的一边，直到左边缘或右边缘或另一个浮动框的边缘。
    浮动最典型的应用：让多个块级元素在一行内排列显示。
    2、语法
    float:left; 左浮动
    float:right; 右浮动
    3、清除浮动：
    clear:left; 清除左浮动
    clear:right; 清除右浮动
    clear:both; 清除左右浮动
    4、由于子盒子浮动，导致父盒子高度撑不开，如何解决：
    1、给父盒子加高度
    2、清除浮动：
    1、第一种方式：额外标签法，也称隔墙法，是W3C推荐的做法
    额外标签法会在浮动父元素的末尾添加一个空的标签（必须是块级元素，不能是行内元素），
    例如：

    ，或者其他标签（如
    等）。
    优点：通俗易懂，书写方便。
    缺点：添加许多无意义的标签，结构性较差
    2、父级添加overflow属性 overflow：hidden
    优点：代码简洁
    缺点：无法显示溢出的部分（也就是溢出的部分隐藏了）
    3、:after伪元素法：推荐使用
    :after方式是额外标签法的升级版，也是给父元素添加
    .clearfix:after{
    content: “”; /在clear类后面添加内容为空/
    display: block; /把添加的内容转换为块元素/
    clear: both; /清除这个元素两边的浮动/
    }
    .clearfix{/ 兼容IE6、IE7浏览器/
    *zoom: 1;
    }
    父元素添加clearfix样式：

    优点：没有增加标签，结构更简单
    缺点：需要照顾低版本的浏览器（不兼容IE6-7）
    代表网站：百度、淘宝网、网易等。