CSS浮动

---

一、浮动元素float有什么特征

• 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
• 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
• 浮动元素后面的内联元素会向此浮动元素的外边距靠齐

二、浮动元素有什么影响

1. 对父元素的影响：对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素塌陷。
2. 对非浮动兄弟元素的影响：若兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素；若兄弟元素为内联元素，则元素会环绕浮动元素排列。
3. 对浮动兄弟元素的影响：当一个浮动元素在浮动过程中碰到方向相同的浮动元素时，它会紧跟在它们后面；与方向相反的浮动元素互不影响，位于同一条水平线上，当空间不够时会被挤下。
4. 对子元素的影响：当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

三、如何清除浮动

清除浮动指清除掉元素的float属性，主要有以下几种方式：

1. 尾元素清除浮动。给父元素加上clearfix类即可。

.clearfix:after{
  content:"";
  height:0;
  line-height:0;
  display:block;
  clear:both;
  visibility:hidden;
}
.clearfix{
   zoom:1;  //因为IE6不支持:after伪类。它的效果和height:1%一样
}

2. 在浮动元素后面加空标签clear:both;
3. 给没有设置高度的父元素设置overflow:hidden;

CSS定位

---

一、静态定位 static

所有标准流中的元素默认都是静态定位position: static;。

二、相对定位 relative

相对定位position: relative;设置后，需配合top、right、bottom与left(trbl属性)给出坐标来使用。特点如下：

1. 元素相对于自身原来的位置进行定位。
2. 相对定位的元素在页面上占据了位置，没有脱离标准流。

三、绝对定位 absolute

设置后也需配合trbl属性来使用。

1. 若元素的父级有设置定位（非static），则元素相对父级的位置进行定位。
2. 若元素的父级没有设置定位，则元素相对有设置定位且关系最近的祖宗元素的位置进行定位。
3. 若元素没有父级或祖宗元素均未设置定位，则元素相对body进行定位
4. 绝对定位的元素在页面上不会占据位置，脱离了标准流。

四、固定定位 fixed

设置后也需配合trbl属性来使用。

1. 不论页面多大，元素始终相对浏览器边框来定位。
2. 固定定位的元素不在页面上占据位置，脱离了标准流。

五、sticky

效果相当于相对定位与固定定位的结合。当目标区域在屏幕中可见时，元素表现为相对定位，随着视图滚动；而当页面滚动超出目标区域时，元素表现为固定定位，会固定在目标位置。

z-index

---

有什么作用

z-index可以解决元素相互之间覆盖的问题，决定哪个元素被显示，哪个元素被覆盖。

如何使用

1. z-index的值可正可负，一般数值越大，层级越高，越放置在上方。
2. 无论两个元素自身的z-index相差多大，父元素z-index更大的元素永远在上方；当父元素z-index相等时，才比较自身的大小。