float 浮动和postion定位

属性值： left  right  none

特点： 

     1.可以提升元素的层级关系。但是只是提升了半个层级（背景被盖住，文字就会被挤出来）

      2.是设置为left/right当前元素就可以设置宽高和在一行显示

      3.浮动会自动换行

      4.浮动元素会去找离他最近的有浮动的元素进行贴边

      5.如果没有其他浮动元素，那么会找父元素的边缘进行贴边

      6右浮动会颠倒盒子顺序

浮动塌陷：

子元素浮动，父元素设置宽高，会出现高度撑不开的现象称之为父元素高度塌陷

解决浮动塌陷

1.给父元素添加宽高

2.给父元素添加overflow:hidden;(常用)

3.创建空标签，给标签添加clear；both;

4.给父元素添加：：after伪元素

（  opacity    透明度）

清除浮动

clear：left/right/both      左浮动/右浮动/两者都

position 定位

属性值;static静态定位 默认值

             relative相对定位

             absolute 绝对定位

             fixed固定定位

              sticky粘性定位

 relative相对定位

1.提升了层级，但是不会让出原来的空间

2.相对于当前元素的左上角

 absolute 绝对定位

1.添加绝对定位，让出原来的空间

2.添加left和top的时候，是从页面的左上角进行调整

3.脱离文档流，并且提升了层级，1层

        absolute脱离了标准流的父元素；如果absolute有父元素并且添加position，那么就会相对于这个元素进行定位

fixed固定定位

1.让出原来的空间

2.相对于浏览器的窗口进行定位

3 top/bottom/left/right   用来固定位置