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>

 

 

 

 

 

 

 

评论

1 楼 speed_guo 2010-04-19  

可以,学了一点