一、浮动

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

元素浮动后的特点：

• 脱离文档流。
• 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开(尽可能小)，而且可以设置宽高。
• 不会独占一行，可以与其他元素共用一行。
• 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding。
• 不会像行内块一样被当做文本处理（没有行内块的空白问题）。

浮动相关属性：

/* 设置不浮动，默认值 */
float: none;
/* 设置左浮动 */
float: left;
/* 设置右浮动 */
float: right;

/* 清除前面兄弟元素左浮动的影响 */
clear: left;
/* 清除前面兄弟元素右浮动的影响 */
clear: right;
/* 清除前面兄弟元素左右浮动的影响 */
clear: both;

元素浮动后会的影响：

• 对兄弟元素的影响: 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
• 对父元素的影响: 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

解决浮动产生的影响：

• 方案一：给父元素指定高度。
• 方案二：给父元素也设置浮动，带来其他影响。
• 方案三：给父元素设置 overflow:hidden 。
• 方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both。
• 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。推荐使用。

.parent::after {
  content:"";
  display:block;
  clear:both;
}

二、相对定位

position: relative;
left: 20px;
top: 20px;

特点：

• 相对自己原来的位置。
• 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
• 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。
• left 不能和 right 一起设置，top 和 bottom 不能一起设置。
• 相对定位的元素，也能继续浮动，但不推荐这样做。
• 相对定位的元素，也能通过 margin 调整位置，但不推荐这样做。

三、绝对定位

position: absolute;
right: 20px;
bottom: 20px;

绝对定位参考它的包含块：

• 对于没有脱离文档流的元素：包含块就是父元素；
• 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

特点：

• 脱离文档流，会对后面的兄弟元素、父元素有影响。
• left 不能和 right 一起设置，top 和 bottom 不能一起设置。
• 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
• 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
• 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

定位元素：默认宽、高都被内容所撑开，且能自由设置宽高。

四、固定定位

position: fixed;
left: 20px;
top: 20px;

固定定位参考它的视口,对于 PC 浏览器来说，视口就是我们看网页的窗口。

特点：

• 脱离文档流，会对后面的兄弟元素、父元素有影响。
• left 不能和 right 一起设置，top 和 bottom 不能一起设置。
• 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
• 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
• 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

五、粘性定位

position: sticky;
left: 0px;
top: 0px;

粘性定位参考离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

特点：

• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
• 最常用的值是 top 值。粘性定位和浮动可以同时设置，但不推荐这样做。
• 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

六、定位层级

• 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
• 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
• 可以通过 css 属性 z-index 调整元素的显示层级。
• z-index 的属性值是数字，没有单位，值越大显示层级越高。
• 只有定位的元素设置 z-index 才有效。
• 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

/* 指定一个元素的堆叠顺序 */
z-index: -1;

七、定位元素的充满与居中

对于绝对定位和固定定位的元素：

1. 让定位元素的宽充满包含块

• 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0。
• 高度想与包含块一致，top 和 bottom 设置为 0。

2. 让定位元素在包含块中居中

方案一：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二：（定位的元素必须设置宽高）

left: 50%;
top: 50%;
/* 负的宽度一半 */
margin-left: -200px; 
/* 负的高度一半 */
margin-top: -200px;