浅谈CSS中的浮动、定位

今天尝试了一下CSS中的几个布局属性，有float、absolute,在这里记录一下我的收获。

1、float：该属性表示浮动，只能在左右浮动，不能用于上下，而且是相对于块元素说的。在水平排列几个块元素时，几个块元素之间的间隔（margin-left,maigin-right）、边框（border-left,border-right）、宽度(width)之和不能大于等于父元素的宽度之和。一旦大于等于，浮动的空间不够，就会变成垂直排列。

例如：

#content{

width:800px;

height:400px;

margin:auto;//居中

}

.content1{

    float:left;

    width:250px;

    border:2px;

    margin:8px;

    height:300px;

    background-color:red;

}

.content2{

    float:left;

    width:250px;

    border:2px;

    margin:8px;    

    height:300px;

    background-color:blue;

}

.content3{

    float:left;

    width:250px;

    border:2px;

    margin:8px;

    height:300px;

    background-color:red;

}

<div id="content">

<div class="content1">

</div>

<div class="content1">

</div>

<div class="content1">

</div>

</div>

3个div的间隔（margin-left,maigin-right）、边框（border-left,border-right）、宽度(width)之和要小于800px,还要注意在布局后面的元素时，如果不想浮动，立刻用clear属性，清除前面的float属性，否则后面的元素会默认浮动的。

---------------------------------------------------------------------------------------------------------------------------

2.position:我主要看了两个值absolute和relative.

absolute是相对于body{width:100%}的样式来布局的，是以浏览器的窗口为主的，不受父元素的影响。

relative是以该元素本应出现的位置来布局的，例如：默认div元素margin-top:10px;那么用{position:relative;top:12px;}就是指margin-top增加12px,{position:relative;top:-5px;}就是指margin-top减少5px.