一、浮动定位

让块级元素在一行内显示

将元素排除在普通文档流之外，会脱离文档流，元素不会占用页面的位置

浮动的元素会停靠在别的浮动元素（页面的边缘）的左边或者右边

属性：float

取值：left 左浮动

right 右浮动

浮动的影响：子元素都浮动的话，会造成父元素高度的丢失

解决方法：

1、让父元素也浮动

2、给父元素设置固定的高度

3、在父元素最后一个子元素的后面添加一个块级元素

设置样式 clear：both

4、设置一个类添加：after 伪类

.clear::after{

content: "";

display: block;

clear: both;

}

二、相对定位

相对于自身的一个定位方式，不脱离文档流

position：relative

需要配合方向进行定位

top：5px； right：5px；bottom：5px； left：5px

三、绝对定位

相对于最近的已定位的元素，如果最近的元素都没有定位，那么就会相对于body定位

position：absolute

如果希望在一个元素内定位，一般我们使用relative进行配合

需要配合方向进行定位

top：5px； right：5px；bottom：5px； left：5px

四、固定定位

相对于浏览器窗口进行定位（多用于小广告、小按钮）

position：fixed

定位元素设置层级：z-index：99；（数值自定义）