CSS 元素定位

定位用于改变元素的默认排列方式。

1. 普通流定位（文档流定位）

默认排列方式：块级元素从上到下，行内元素从左到右。

2. 浮动定位

float: left / right / none;

• 特点：

浮动元素脱离文档流，不再占据空间。如果一行显示不下，会自动换行（可能被卡住），添加了浮动的元素会表现为块级元素（同时具备行内块的特点），可以设置宽高和 margin 属性。

• 影响：

1. 元素浮动会由于脱离了自身的文档流，影响后续元素布局
2. 添加了浮动的元素会影响父元素的高度

• 解决方案：

1. 清除自身元素前面的浮动
2. 给父元素设置高度，但是大部分情况下高度不固定（不推荐）
3. 给父元素加浮动，但同时也会影响父元素的后续元素（不推荐）
4. 在父元素的最后添加一个空标签（必须为块级元素），并且设置属性clear:both；但如果页面空标签多了，会影响性能
5. 给父元素设置overflow:hidden/auto;
6. 给父元素添加 ::after 伪元素（推荐）

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
}

3. 相对定位

position: relative;

不脱离文档流，保留自身原来的空间，相对于元素原来所在位置进行偏移。配合偏移属性 left / right / top / bottom 使用。

4. 绝对定位

position: absolute;

不保留自身空间，相对于离自身最近的已定位的祖先元素进行定位，如果找不到，就相对 body 进行定位。并配合偏移属性 left/right/top/bottom 一起使用。

5. 固定定位

position: fixed;

永远相对于浏览器页面进行定位，并配合偏移属性 left/right/top/bottom 一起使用。

6. 弹性布局定位

display: flex;

弹性布局是 CSS3 引入的布局方式，自带强大的对齐和空间分配能力，可大幅减少布局中的手动计算。详细语法参考菜鸟教程 - Flex 布局。