DIV+CSS中的float浮动定位笔记。
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
- 浮动元素将以块级元素出现，即display=block并将忽略display的其他设置。
- 浮动元素后的元素将浮动到浮动元素的位置
- 浮动元素将向左或向右直到遇到边框或一个块级元素位置
- 创建固定宽度的DIV
设置宽度为固定值
#style1
{
width :300px;
height :200px;
}
- 创建宽度自适应的DIV
设置宽度为百分值
#style1
{
width :100%;
height :200px;
}
- 创建两列固定宽度DIV
需要同时设置宽度为固定值
#left
{
width :300px;
height :200px;
float :left ;
}
#right
{
width :600px;
height :200px;
float :left ;
}
- 创建两列自适应宽度DIV
需要同时设置宽度为百分值，左右列都向左浮动。
#left
{
width :30%;
height :200px;
float :left ;
}
#right
{
width :70%;
height :200px;
float :left ;
}
- 创建一列固定宽度，一列自适应的两个DIV
设置左列向左浮动，另外一列既不设置宽度也不设置浮动。该段代码在IE下测试通过，但是在FireFOX下style2会下移。(但我测试却没有问题，和基本一致)
#left
{
width :300px;
height :200px;
float :left ;
}
#right
{
height :200px;
}
如果在FireFox中不正常显示，需要修改代码。增加margin-left属性设置左边距和左列宽度相等。如下：
#left
{
width :300px;
height :200px;
float :left ;
}
#right
{
height :200px;
margin-left :300x;
}
- 实现三列，左右两列固定，中间一列自适应
设置左右列的分别为向左和向右浮动，中间为不浮动
#left
{
width :300px;
height :200px;
float :left ;
}
#center
{
height :200px;
}
#right
{
width :300px;
height :200px;
float :right ;
}
<!--需要设置的顺序为左，右，中--><div id="left">
</div>
<div id="right">
</div>
<div id="center">
</div>
- 一列DIV的居中显示、
#style1
{
width : 766px;
height : 200px;
margin-left :auto;
margin-right :auto;
}
- DIV中文字垂直居中
需要设置line-height行间距和高度相等，此方法比较流行，但是我觉得不是个好办法。
#style1
{
width : 766px;
height : 200px;
line-height :200px;
}
