浮动与定位

浮动
使用 float 属性来设置于元素的浮动；可选值：none 默认值 ，元素不浮动；left 元素向左浮动；right 元素向右浮动

浮动的特点：

1、浮动元素会完全脱离文档流，不再占据文档流中的位置

2、设置浮动以后元素会向父元素的左侧或右侧移动，

3、浮动元素默认不会从父元素中移出

4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素

5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
定位
定位是一种更加高级的布局手段- 通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位，可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
（一）相对定位：- 当元素的position属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点：1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化；2.相对定位是参照于元素在文档流中的位置进行定位的；3.相对定位会提升元素的层级；4.相对定位不会使元素脱离文档流；5.相对定位不会改变元素的性质块还是块，行内还是行内
（二）绝对定位- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点：1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化；2.开启绝对定位后，元素会从文档流中脱离；3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开；4.绝对定位会使元素提升一个层级；5.绝对定位元素是相对于其包含块进行定位的
（三）固定定位：- 将元素的position属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样；唯一不同的是固定定位永远参照于浏览器的视口进行定位；固定定位的元素不会随网页的滚动条滚动
（四）粘滞定位- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定