1.【position】定位
规定应用于元素的定位方法的类型。
规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
文档流:浏览器会默认排列元素 从上到下(块元素) 从左到右(行元素和行内块元素) 进行排列 我们称为流式布局
定位存在的目的就是为了方便我们移动元素的位置
【static】静态定位
HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
默认定位方式 静态定位 会按照文档流要求的排列进行布局
static静态定位，元素默认的定位方式
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
position:static;
【relative】相对定位
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
相对定位: 相对于元素本身进行定位 不会脱离文档流
层级会上调 可以使用 z-index调整层级
left top right bottom 可以调整位置 出现冲突 以top和 left为准
一般用于元素位置的微调
relative相对定位，元素设置了相对定位后不会脱离文档流依旧参与流式布局，自身原有位置保留，在移动时参照自身原有位置进行定位
相对定位：通常用于轻微的元素位置调整，例如:上下层级调整(z-index:参数; 参数没有特定范围，值越大越大越在上面，越小越在下面)
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
(子绝父相)
position:relative;
【absolute】绝对定位
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
相对于 离自己最近的 非static的 祖先元素 进行定位 直到body 都没有 就相对于body
脱离文档流 层级上调 可使用 z-index 调
使用 top left bottom right 调整位置 默认是文档流中的位置
行内块和行元素开始绝对定位会变成块元素
一般用于让一个元素相对于另一个元素进行定位 子绝父相
absolute绝对定位，元素设置了绝对定位会脱离文档流不在参与流式布局，不在拥有自己的位置。
设置了绝对定位的元素在移动位置时会先查看它的父元素是否为静态定位，如果是静态定位，则查看它父元素的父元素，一直找到html为止，如果找到了尽相对于那个非静态定位的元素进行移动位置，如果没找到就相对于整个页面进行定位。
设置了绝对定位的元素在移动位置时会先查看它的父元素是否为静态定位，如果是静态定位，则查看它父元素的父元素，一直找到html为止，如果找到了尽相对于那个非静态定位的元素进行移动位置，如果没找到就相对于整个页面进行定位。
绝对定位的元素的位置相对于最近的已定位父元素
如果元素没有已定位的父元素，
那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
(子绝父相)
position:absolute;
【clip】剪裁绝对定位的元素。
用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
【参数值】
【shape】设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
【auto】自动
【fixed】固定定位
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
相对于浏览器窗口进行定位 默认是在原来文档流中的位置
脱离文档流 层级上调 可以使用 z-index 进行调整
top left bottom right 调整位置
不设置宽高会由内容撑开
行内元素和 行内块 转为 块元素
一般用于侧边栏 广告
fixed固定定位，元素设置了固定定位后会脱离文档流，不再参与流式布局，参照整个页面进行定位，也不再随页面滚动而滚动
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
position:fixed;
【sticky】粘性定位
position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
开启粘性定位 相对和固定的组合使用
position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动
在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时
它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。
否则其行为与相对定位相同。
定位后的元素都可以通过 top 上 left 左 right 右 bottom 下 进行调整位置
position:sticky;
【z-index】层级
层级设置 可以解决层叠问题
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
z-index:参数值；
【参数值】
auto
number
2.【float】浮动布局和清除浮动
浮动布局: div+float+positon
浮动:目的将多个块元素在同一行显示
浮动的影响：
- 对本身的影响 ： 脱离文档流 层级上调 行内元素和行内块元素都会变成 块元素 不会覆盖文字
- 对兄弟元素： 会对兄弟元素的布局产生影响 可以添加 clear
- 对父元素： 引起父元素的高度塌陷
float开启浮动 left左浮动 right右浮动
元素设置浮动后会脱离文档流，不再参与流式布局，在文档流中不在拥有自己的位置
注意：用到浮动就一定要清理浮动
子元素开启浮动后 会立即脱离文档流 导致父元素无法被撑起引起高度塌陷
浮动：让元素按照指定的方向进行运动，直至遇到父级元素 或者 同级浮动元素的边沿时停下，浮动的方向：left 左浮动；right 右浮动
特点：1.会让元素脱离文档流
2.可以让块元素在同一行显示
3.可以让行内元素支持设置宽高
float:left;
float:right;
清除浮动
clear left 清除左浮动的影响 right右浮动的影响 both全部清除
方案1：解决父元素高度塌陷
方案3 添加overflow :hidden
方案2:添加一个空标签 然后清除兄弟元素的影响
方案4 使用伪元素清除浮动
更多解决方案参看BFC
如何解决浮动引起的父元素高度塌陷
1、给父元素设置高度(有弊端)
2、overflow：hidden(推荐)
3、父元素也设置成浮动 (不推荐 因为引发父元素的宽度缺失)
4、开启BFC(了解)
5、添加一个空白元素 并清除兄弟元素对它的影响(没副作用推荐使用 但是会影响我们的页面结构)
元素浮动之后脱离文档流，如果对后面的布局产生影响，就需要清除浮动，
用一个空的div，设置clear类名专门负责清除浮动
用来清除浮动，right，left，both
浮动后 都会变成块元素 默认高度和宽度是内容撑开的
清除对自身的影响
clear:both;(both:全部，left:左浮动，right:右浮动。)
清除对父元素的影响（伪元素清除方法）
.clearfix::before,.clearfix::after{
content: "";
display:block;
clear:both;
}
