文档流：文档中可以显示的对象在排列时所占的位置
浮动：使元素脱离正常文档流，按照指定的方向发生移动，直到碰到它的父元素的外边缘或另一个浮动元素的边框为止

float的属性值：
    float: left; 左浮动
    float：right; 右浮动
    float：none; 不浮动
特性：
    元素浮动之后不占位，父元素要有一定的高度；
    层级提升——半层；
    脱离正常文档流；
    元素不设宽度时，宽度自适应；
    使行级元素支持宽、高
浮动中存在的问题——子元素加浮动后，父元素无法撑开高度
    解决办法：
        1）为浮动元素的父级盒加固定的高度（闭合浮动）——不够灵活
        2）为浮动元素的父级盒加overflow:hidden; ——可能会导致内容显示不完全
        3)在浮动元素的后面，跟浮动元素呈并列关系的位置，加一个空div元素，在空div元素上加属性clear: both;——代码冗余
        4）推荐方式：
            给浮动元素的父级盒加类名clearfix——不会在结构上产生冗余代码，可以重复使用
                .clearfix{ *zoom:1; }
                .clearfix:after{
                    content:"";
                    display: block;
                    clear: both;
                }

overflow: 溢出处理方式
    overflow: visible; 溢出显示，默认值
    overflow: hidden; 溢出隐藏
    overflow: scroll; 溢出显示滚动条（横向和纵向）
    overflow: auto; 自动——内容溢出显示滚动条
clear: 清浮动
    clear: both; 清除两侧浮动
    clear: left; 清除左侧浮动
    clear: right; 清除右侧浮动

---

伪元素选择器：

            element:before{ content:""; } 在元素内部，内容之前添加一个内容
            element:after{ content:""; } 在元素内部，内容之后添加一个内容

定位技术：网页中出现覆盖关系优先考虑使用定位技术
position属性：将元素从页面中偏移或分离出来，然后设定元素的位置，实现元素的精确定位

position：static; 静态定位，相当于没有定位
position: relative; 相对定位,元素微调
    不影响元素本身的特性；
    不会使元素脱离正常文档流；
    如果不设置定位偏移量，对元素本身没有任何影响；定义了定位偏移量，相对于原来的位置发生偏移；
    提升层级
position: absolute; 绝对定位
    使行级元素支持宽、高；块级元素宽度自适应（无固定宽度）；
    使元素脱离正常文档流，不占位；
    有定位父级相对于定位父级发生偏移；没有定位父级相对于整个文档发生偏移；
    提升层级
    绝对定位的使用步骤：
        1）为要做特殊定位的盒子（定位盒）加：position:absolute;且绝对定位，设置初始位置，通过left/right、top/bottom:
            left:0;/right:0;
            top:0;/bottom:0;
        2）为定位盒的父级盒（有固定宽、高）加：position: relative; 相对定位
        3）回到定位盒，通过定位偏移属性（横向一个，纵向一个）进行精确定位

---

position：fixed; 固定定位
    宽度变为自适应；
    元素加固定定位后脱离正常文档流，不占位；
    始终相对于浏览器四个角进行定位，不随页面内容的滚动而滚动

z-index： 提升层级——为定位盒设置叠放次序，

    只对定位元素生效
    数值越大，叠放次序越高
    正值向上调整层级，负值向下调整层级
    属性值没有单位