CSS-定位与浮动小结

• static

默认值，指定元素使用正常的布局行为，即元素在文档流中的当前布局位置。此时top，right，bottom，left，z-index都无效。

• relative

相对定位，相对自身原本未添加定位时的位置来定位。并且没有脱离文档流，元素未添加定位时的位置会被保留。

• absolute

绝对定位，脱离文档流。

1. 绝对定位元素的包含块（对于一个非根元素），为距离最近的定位非static的元素，也就是可以是relative也可以是fixed定位。
2. absolute的破坏性

所谓破坏性指的是，如果父元素没有设置高度，高度是由子元素撑起来的，那么如果子元素设置了绝对定位，由于脱离了文档流，父元素的高度就塌陷了。

3. 浮动与绝对定位是相斥的，不能同时生效。
4. 绝对定位不会对其他同级的元素有影响，因为脱离文档流了。
5. 绝对定位之后元素会生成一个块级框，这点和float一样。

• fixed

固定定位，脱离文档流。

---

• 浮动
  1. 浮动的本意是将要插入到文章中的图片进行浮动，使得文字环绕图片。这是目前只能用float做到的。
  2. 包含块，浮动元素的包含块指的是距离其‘最近’的‘块级’祖先元素。
  3. 只要元素浮动，就会生成一个块级框，不论它原本是什么（行内也好块级也好）。所以浮动元素写display：block是很多余的。⚠️
  4. 浮动始终是在其包含块中的，但是，负外边距可以让浮动元素"跑到“包含块的外面。
  5. 浮动元素脱离文档流。

---

• 脱离文档流

  1. 绝对定位
  2. 固定定位
  3. 浮动

• 偏移属性

  1. top,right,bottom,left作用于非static的定位元素。
  2. 如果值是百分数，是针对于包含块的高、宽。
  3. 偏移属性描述了定位元素的外边距偏移包含块的距离。