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;
        }