浮动定位、相对定位、绝对定位、固定定位

一、浮动定位

        让块级元素在一行内显示

        将元素排除在普通文档流之外，会脱离文档流，元素不会占用页面的位置

        浮动的元素会停靠在别的浮动元素（页面的边缘）的左边或者右边

        属性：float

                取值：left        左浮动

                          right       右浮动

        浮动的影响：子元素都浮动的话，会造成父元素高度的丢失

        解决方法：

                        1、让父元素也浮动

                        2、给父元素设置固定的高度

                        3、在父元素最后一个子元素的后面添加一个块级元素

                                    设置样式 clear：both

                        4、设置一个类添加：after 伪类                                

                                .clear::after{

                                            content: "";

                                            display: block;

                                            clear: both;

                                        }

二、相对定位

        相对于自身的一个定位方式，不脱离文档流

        position：relative

        需要配合方向进行定位

        top：5px；        right：5px；        bottom：5px；        left：5px

三、绝对定位

        相对于最近的已定位的元素，如果最近的元素都没有定位，那么就会相对于body定位

        position：absolute

        如果希望在一个元素内定位，一般我们使用relative进行配合

        需要配合方向进行定位

        top：5px；        right：5px；        bottom：5px；        left：5px

四、固定定位

        相对于浏览器窗口进行定位（多用于小广告、小按钮）

        position：fixed

定位元素设置层级：z-index：99；（数值自定义）