新人学习笔记之（浮动和定位）

一、float浮动

        1.float属性

                1）浮动基础知识

                        （1）浮动的基本语法 float:left right none

div{
            float: left;
            /* 浮动 */
        }

                2）清除浮动语法

                        （1）clear: none| left | right | both 设置了float的元素会影响相邻元素 需要使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响

                3）清除浮动的常用方法

                        （1）方法1:在浮动元素后使用一个空元素，<divclass = "clear"></div>

                        （2）方法2:给浮动元素的容器添加overflow:hidden:*zoom:1用来兼容ie6/7

.box1{
            overflow: hidden;
        }

                        （3）方法3:使用css3的after伪元素 .clear:aftercontent:.,display block height:0 visibilityhidden clear:both }.clearfix{*zoom:l}

二、position定位

        1.position-static

                1）作用:使元素定位于常规流中(块，行垂直排列下去，行内自左向右)。特点:1，忽略top，bottom，left，right或者z-index声明2.两个相邻远的如果都设置外边距，最终外边距等于外边距大的 3.具有固定width和height的元素，把左右外边距设置为auto 会使这个块水平居中

        2.position-relative

                1）相对定位:作用:是一个可定位的祖先元素。特点:1可使用top，bottom，left，right或者z-index声明 2.相对定位的元素不会离开常规流 了任何元素都可以设置 并且它的后代都可以相对它进行绝对定位 4.可以使浮动元素偏移，并控制他们的堆叠顺序

.box2{
            position: relative;
            left: 150px;
            top: 100px;
        }

        3.position-absolute

                1）绝对定位 作用:使元素脱落常规流，特点:1.设置百分比尺寸要注意 最近定位祖先元素 2.left。right,top.bottom设置为auto将变回原型3leftright,top,bottom设置为0 将对其到最近定位祖先元素的各边。可以进行居中设计

.box1{
            width: 300px;
            height: 300px;
            background-color: brown;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        4.position-fixed

                1）固定定位元素不会随视窗滚动而滚动，继承绝对定位的特点

.box1{
            width: 300px;
            height: 300px;
            background-color: brown;
            position: fixed;
        }

        5.position-sticky

                1）磁贴定位 相对定位和固定定位的结合 制造吸附效果。 特点:1.若产生偏移，原位置还是会在常规流中。 2.祖先元素没滚动。他的偏移标尺就是视窗。

.box1{
            width: 300px;
            height: 300px;
            background-color: brown;
            position: sticky;
        }

三、整体思维导图