CSS定位

CSS定位有哪几种方式？

css定位有float浮动和position定位。

一、float（浮动）

1. 取值

• left：沿着父容器靠左排列
• right：沿着父容器靠右排列
• both：没有浮动

2. 特性: 会脱离文档流[^1]，沿着父容器靠左或靠右排列，紧贴其他元素，可以解决左右排列的问题。

[^1]：是指文档中可显示对象在排列时所占用的位置。

这种定位方式很简单，只需要规定一个浮动的方向，如 float:left；/float：right；就表示这个元素向左/向右浮动， 是相对于父容器定位。
示例
效果图
但是如果该元素设置了浮动，会影响后面的元素，这时候就需要清除浮动了。

3. 清除浮动

• 解决上下排列的情况：利用clear属性清除浮动

  clear：left （清除左浮动）
  clear：right （清除右浮动）
  clear：both （没有浮动）
  示例
  效果图：没有清除浮动的情况下红色方块会浮在蓝色方块上方。
  效果图：给蓝色方块清除浮动之后，红色方块不影响后面元素。

• 解决嵌套排列的情况

  ①.设置空标签：在父容器下添加一个空标签，然后进行清除浮动，但比较麻烦，不推荐。
  ②.after伪类：属于空标签的加强版.:after{ content:""; display:block;clear：both;}
  示例
  效果图

二、position（定位）

position定位是指定位置的定位，可解决叠加排列的问题。以下是常用的几种：

1. static（默认）：静态定位。当我们没有指定定位的时候，默认就是static。
2. relative：相对定位。通过left、right、top、bottom偏移量相对于自身进行偏移。如果没有偏移量，对元素本身没有任何影响，不会使元素脱离文档流，且不会影响其他元素的布局。
3. absolute：绝对定位。通过left、right、top、bottom偏移量相对于最近的已定位祖先元素进行偏移，“子绝父相”通常设置父元素relative来配合使用，在没有父元素的情况下，它的参照为body，这种定位方式会使元素脱离文档流。
4. fixed：固定定位。通过left、right、top、bottom偏移量相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，这种方式也会使元素脱离文档流。（注：fixed和absolute的区别在于fixed不受祖先元素和浏览器滚动条的影响。）
5. sticky：粘性定位。该方式在为达到指定位置的时候，无定位效果，当到达指定位置，就变成固定位置。

以上就是我在逆战班当中学习的css定位。