前端：浮动与定位

浮动

1、在默认情况下，任何元素都不具备浮动特性，用css的float定义元素向左或向右浮动

2、被定义浮动后，元素会自动以块状显示，浮动元素定义的宽和高才有用，浮动元素应明确定义大小

3、浮动元素始终会在包含框内，这与定位元素不同

4、浮动元素只能改变水平显示方式

清除浮动clear:

left：清除左浮动

right：清除右浮动

both：左右浮动都清楚

none：默认值，允许浮动存在，当前元素不会主动换行

定位显示position

以定位框作为参照物，以块状显示

static：不定位，默认流动

absolute:绝对定位，用left\right\top\bottom对最接近的父包含框进行绝对定位，不存在包含框就相对于浏览器窗口定位

fixed:固定定位，与absolute相似，但是不会随滚动条滚动

relative:相对定位，用left\right\top\bottom确定，方式是先按static方式生成一个元素，然后移动这个元素，元素形状和偏移前位置不变。

定位框

相对定位：遵循流动布局模型，根据原位置进行偏移，原位置占位不会被其他元素挤占，但是可以覆盖在其他元素之上显示，相对定位元素在可见窗口之外不会出现滚动条。

绝对定位：原位置会被其他元素挤占，把绝对定位的元素放在可见窗口之外会导致滚动条的出现

定位叠层z-index

1、只有position的值为relative/absolute/fixed时才能使用

z-index的值越大，则那一层的位置在越高层级，等于负值时则在下面，等于充当了背景

混合定位布局：相对定位+绝对定位

例如：父元素为position:relative，子元素为position:absolute那么子元素就会跟随父元素