css浮动和定位

CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧

float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动

<style type="text/css">  

  div{   

width:100；

height:50px;                

line-height: 50px;                

text-align: center;                  

margin:10px;    

float:left;                  

}        

.box-1 {                 border: 3px solid red;         }        

.box-2 {                 border: 3px solid blue;         }    

.box-3 {                 border: 3px solid green;         }

</style>

<div class="box-1">Box-1</div>    

<div class="box-2">Box-2</div>

<div class="box-3">Box-3</div>

所有 div 排列在一行（靠左浮动）向右的话改一下变成ringht即可

CSS 中 position 规定了元素的定位方式

position 属性的可选值包括:

relative 相对定位

absolute 绝对定位

fixed 固定定位

static 默认值

相对定位：不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为此元素原文档流的位置

.box-2 {                

border: 3px solid blue;    

position: relative;                

top:20px;                

left:30px;}

<!--设置相对定位-->  

绝对定位：脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素

.box-2 {                

border: 3px solid blue;    

position: absolute;                

top:40px;                

left:50px;        

}<!--设置绝对定位-->