css float使用

• 项目里初版本的页面也要我们来写，没办法，写吧，用css时，float没用好，页面排版不好，搜点资料备用

float 有三个属性left，righ，none 。 在使用float时需要注意的是float是相对于下个元素的，如两个div，第一个div float:right那么两个div就会在同一行上，第二个div会出现在右边。当然一个容器内只有一个元素的话也可以使用float，不过这样效果就 类似于text-align了。

 

     相对于 float 的元素，其他元素的文字内容会自动围绕 (wrap) 它，如一个图片 float ： right 那么同容器的文字内容就会出现在图片的左边和下 面，但是背景（background color）和边框（board）却不会，它们不会在遇到float的元素时停止，为解决这个问题，可以包含背景和边框的元素的样式上添加 overflow:hidden，这样背景和边框遇到float对象时就会截断。这种方法对于ie6 及其早期的浏览器存在问题，可以使用ie特有的 zoom: 1来模拟。如

* html h2 {
            
    zoom: 1;
}  

    * html 只有 ie6 ，更早版本的 ie 支持， ie7 和其他的浏览器会忽略这段样式。

 

     某些情况下需要 去除float效果 ，比如对于copyright来说它总是在页面的底部，为了使其他float元素不会影响到它，可以在copyright的样式上添加clear：both。clear有4种属性left，right，both，none。

 

     float 与 div 合用，可以很方便的对页面进行布局 。

     一般情况都需要给 float 元素设置一个宽度，除非它是个图片（图片有固定的宽度），以方便它周围的其他元素定位。

还有个需要注意的是，当float的元素比包裹（wrap）它的元素短的时候，需要给wrap元素设置margin-left或者margin-right，以float元素会被wrap，导致布局混乱。如：

    <div>
        <div id="sidebar" style="float:left; width: 120px;">
            ...      
        </div>
        <div id="main" style="margin-left:140px;">
            ...
        </div>
    </div>

    在布局的时候 margin-left 也可以使用负数，如下面的情况， sidebar 尽管设置了 float=left ，但是根据页面元素的位置它在 main 的后面，所以它还是不会出现在 main 的左边，这个时候可以设置 margin-left 为负数，使它定位在左边。 ie6 使用负数 margin 时会也有个 double-margin的bug，解决的方法是在main元素里添加display:inline属性

    <div>
       
        <div id="main" style="margin-left:140px; width: 400px;">
            ...
        </div>
       <div id="sidebar" style="float:left; width: 120px;margin-left=-540px;">
            ...      
        </div>
    </div>