css基础

1.浮动（float)

浮动的框可以向左或者右移动，直到它的外边缘框碰到包含框或者另一个浮动框为止。

例：

<style type="text/css">
#father{
width: 700px;height: 30px;
background: lightblue;margin: 100px auto 0;
}
#son1{
width: 500px;height: 100%;background: lightcoral;float: right;
}
#son2{
width: 100px;height: 100%;background: lightgreen;
}

效果：

 2.定位（position)

定位一共有四种；分别是静态定位（static），固定定位(fixed)，绝对定位（absolute)，相对定位(relative)。

静态定位：没有指定定位方向时，默认就是静态定位。

固定定位:相对于浏览器定位。

绝对定位：相对于离他最近的已定位父级定位

相对定位 ：相对于原本的位置，依然会占据原来的空间。不会脱离原本的文档流

例：

 

 效果：