html浮动页脚,html之浮动和定位

浮动float

可以让原本不能同时显示在一行的元素显示在一行，

定位position

可以让元素位置更精确

分为以下几类

. 绝对定位：absolute脱离文档流，相对自己定位

. 相对定位relative :不脱离文档流，相对文档定位

. 固定定位fiex --相对窗口定位

. 静态定位static

特别情况

定位有父级的时候

父级：相对定位

子级：绝对定位

那么一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对 父级定位

说明内联元素有定位，就支持宽高了

例如：

html>

/*

* 定位有父级的时候

* 父级：相对定位

* 子级：绝对定位

* 一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对父级定位

* 内联元素有定位，就支持宽高

*/

#div1{

500px;

height: 400px;

background: yellow;

position: relative;

}

#div2{

200px;

height: 100px;

background: blue;

position: absolute;

left: 100px;

top: 100px;

}