定位与浮动20180328

一、定位

1.相对定位position: relative; 父级的定位属性通常是相对定位

相对定位,是相对于元素原来位置进行移动,仍在文档流中

2.绝对定位 position:absolute;

绝对定位使当前元素脱离了文档流,相当于在文档流中删除了这个元素

4.固定定位 position:fixed;

元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动（如在线QQ客服）

二、浮动

1.浮动的原理

浮动元素脱离了文档流, 如果第二个色块也浮动的话，第二个色块也脱离了文档流,与第一个是在同一个平面中,它会一直向右侧移动,直到碰到窗口最右侧停止。

将行内元素进行浮动后,将会脱离文档流,从而使其支持宽高设置。

2.同级元素之间的清除浮动的技巧

clear: left; 清除左浮动:该元素的左边不允许出现浮动元素而当前它的左边有浮动元素,而自己本身又是块元素,只能掉到下一行首开始显示。

clear: right;同上

clear:both;该元素的左右二边都禁止出现浮动元素

3.层次元素之间的清除浮动的技巧  

让父元素包住浮动的子元素，给父元素添加:after伪类,在后面添加一个空元素,直接设置它的属性即可

.parent:after {

                            /*1.添加一个空元素*/

                            content: '';

                            /*2.默认为行内元素,所以要转为块元素*/

                            display: block;

                            /*3.直接清除二边的浮动*/

                            clear: both;

                            /*如果ie下显示有问题,可以加上*/

                            /*z-index: 1;*/

                            /*可能你看过有的地方是这样写的:*/

                            /*添加一个空格*/

                            /*content: '\0020';*/

                            /*然后让这个空格高度为0,这样就根本不会显示出来*/

                            /*height: 0;*/

                   }