定位与浮动

浮动 float

float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

float: none; float: left; float: right;

/* 清除浮动 */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

定位 position

CSS position 属性用于指定一个元素在文档中的定位方式。top ，right，bottom 和 left 属性则决定了该元素的最终位置。

定位类型

• 定位元素（positioned element） 是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
• 相对定位元素（relatively positioned element） 是计算后位置属性为 relative 的元素。
• 绝对定位元素（absolutely positioned element） 是计算后位置属性为 absolute 或 fixed 的元素。
• 粘性定位元素（stickily positioned element） 是计算后位置属性为 sticky 的元素。

相对定位position: relative

1. 不设置偏移量元素不会发生变化
2. 元素不会脱离文档流
3. 不会改变元素的性质
4. 元素会提升一个层级
5. 相对于自身在文档流中的位置进行定位

绝对定位position: absolute;

1. 不设置偏移量元素不会发生变化
2. 元素会脱离文档流
3. 会改变元素性质，行内元素变块元素，块元素高度被内容撑开
4. 元素会提升一个等级
5. 相对其包含块进行定位
   1. 初始包含块：html根元素
   2. 默认包含块是离当前元素最近的祖先元素
   3. 对于绝对定位元素，包含快是离它最近的开启了定位的祖先元素。如果所有元素都没有开启定位，则其包含块就是初始包含块

固定定位position: fixed;

1. 大部分特点和绝对定位一样
2. 相对于视口进行定位的
3. 会固定在网页的视口上，不会随网页滚动

定位的水平垂直居中

水平居中：left: 50%; 走父元素宽度的一半，margin-left: -自身宽度/2;，往回走。

垂直居中：top: 50%; 走父元素高度的一半，margin-top: -自身高度/2;，往回走。