浮动、定位和流程布局

一、浮动

        1.标准流：元素按照本身的特性进行排列布局 -->

         2.浮动：元素脱离标准流，移动的指定位置的过程 -->

         3.浮动的分类：左浮动 float:left    右浮动 float:right -->

         4.浮动的初衷：为了实现文字环绕图片的效果 -->

         5.浮动的特点：

              1、添加浮动的元素会漂浮在其他元素之上，不在同一平面上

              2、添加浮动的元素不占位置

              3、同时添加浮动的多个元素在同一直线上展示，且在同一平面上

              4、添加浮动的元素不会超出父元素的范围

              5、添加浮动的元素具有行内块元素的特征

二、清除浮动

        1.为什么要清除浮动？

              浮动的影响，子元素撑不开父元素的高度，因为添加浮动的元素不占位置

         2.清除浮动：并不是清除浮动，而是清除浮动带来的影响，也叫闭合浮动 -->

         3.清除浮动的方法：

              1、额外标签法：

                        给父元素添加额外的标签  clear:left清除左浮动  clear:right清除右浮动  clear:both清除左右浮动

              2、给父元素添加overflow:hidden属性

              3、伪元素清除

              4.display: table:会发出BFC，BFC有清除浮动的功能

        4.overflow：hidden的三个作用：

              1、清除嵌套元素外边距合并所带来的影响

              2、清除浮动

              3、超出的内容隐藏掉

三、定位       

定位：将元素固定在一个具体位置上 

定位的分类：相对定位、绝对定位、固定定位、静态定位

边偏移量：left/right/top/bottom

        1.静态定位 position: static;

                静态定位:无变化，相当于标准流 

        2.相对定位 position: relative;

        3.固定定位 position: fixed;

        4.绝对定位 position: absolute;

四个方向考虑定位的特点：相对于谁定位、是否脱标、是否占位置、是否超出父元素的范围 

        相对定位的特点：

               1、相对于元素本身的位置

               2、不脱标

               3、占位置

               4、可以超出父元素的范围，只跟元素原来的位置相关

        固定定位的特点：

              1、相对于浏览器定位

              2、脱标

              3、不占位置

              4、可以超出父元素范围，只跟浏览器相关

        绝对定位的特点：

              1、

                a：如果父元素没有定位相对于浏览器的视口（可视区域）定位

                b: 如果父元素有相对定位，相对于父元素定位（子绝父相）

              2、脱标

              3、不占位置的

              4、可以超出父元素的范围

四、CSS样式的书写顺序

        位置属性：

                position > float > margin

        尺寸属性：

                width/height > border > padding

        背景属性：

                backgroung-color/-image/-size/-repeat/-postion

        外观属性：

                color/text-align/text-indent/text-decoration/line-height/list-style

        字体属性：

                font-size/-family/-weight/-style

五、版心与布局流程

             布局流程：由外到内、由大到小

                   详见day06-7