7.17css浮动

一,学习目标
    1.标准模式与怪异模式（精通）
    2.浮动布局（掌握）
    3.其它（了解）

二, 转化(掌握)
    1.转化行内元素   inline
    2.转化块元素     block 
    3.转化行内块     inline-block (最常用)
    4.转化为空       none

三, 盒模型的2种模式(掌握)
    1.怪异模式   box-sizing: border-box;  宽高表示的是盒子的宽高, 加padding,或加border 内容变小
    2.标准模式(默认)   设置宽高:  内容大小
                盒子大小: 内容 + padding  + border

四,样式初始化(了解)
    1.标签默认间距
    2.a连接默认的样式

五,伪类hover(掌握)
    使用  tag:hover  { 样式名: 样式值; }
    在什么时候去触发这个样式?  鼠标悬停在tag标签上

六, 鼠标样式(了解)
    重点  cursor: pointer ;  鼠标小手

七， 浮动(掌握)
    概念：float 浮动是页面布局一种手段，
         left   会是元素脱离标准流，元素浮动到最左侧，会变成类似行内块的元素
         right  会是元素脱离标准流，元素浮动到最右侧 ,会变成类似行内块的元素
         none   基本不使用
         作用,使块级元素,能够同处一行
    清除浮动
        1.直接给父元素加高度
            优点: 方便,快捷
            缺点: 有很多不适合直接添加高度的场景
        2.overflow:hidden; (√ 学习中)
            优点: 方便 ,快捷
            缺点: 没有任何语义化
        3.空标签清除浮动: 
            优点: 简单
            缺点: 最大问题:多了没有意义的空标签
        4.伪元素清除法clearfix(√ 标准化,专业)
            优点: 专业,规范,语义化
            缺点: 繁琐,难记