CSS元素定位

定位指的是更改元素的默认排列方式

1. 普通流定位(文档流定位)

默认模式排列，块级元素从上到下，行级元素从左到右

2. 浮动定位

float:left/right/none;

• 特点：

浮动元素脱离文档流，不在占据空间。如果一行显示不下，会自动换行（可能被卡主），添加了浮动的元素会变成块级元素（也符合行内块的特点），并且也可以设置margin属性。

• 影响：

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

• 解决方案：

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

: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;

弹性定位是一种新的定位方式，他自身具有一些计算能力，可以减少在布局时的很多计算问题，本文不多做介绍。详情语法点击这里