position float浮动和定位
浮动 分左浮动和右浮动 对元素浮动后要清除（浮动后脱离文档流），否则后面的元素后跑到浮动的元素“下面”去。
定位 分相对定位和绝对定位，position :relative 是相对于它原来的位置position :absolute 是相对于已经定位的元素或者相对于body 进行定位
<!DCOTYPE html>
<html>
<head>
<tittle>浮动和定位</tittle>
<style>
ul li{width:30px; height:40px; float:left;}
#box1{ width:30px; height:40px ; position :relative top: 20px; right:50px;}
#box1{ width:130px; height:140px ; position :absolute ;top: 20px; right:50px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="box1'></div>
<div id="box2></div>
<div id="box3></div>
<div id="box4></div>
</body>
</html>