当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | float

CSS属性参考 | float

06-13

CSS float属性是一个定位属性,用于使元素脱离正常的文档流,并浮动在它的父容器的左侧或右侧。

浮动元素(floating element)是一个float属性计算值不是none的元素。它会浮动在父容器的左侧或右侧,其它文本元素或行内元素会环绕在它的周围。

一个典型的浮动元素的例子是在一篇文章中,文字环绕在一幅插图的周围。这张图片就是一个浮动元素。目前文本元素或行内元素只能环绕在浮动元素的一侧,无法同时环绕在浮动元素的四周。例如下图是一个文本环绕浮动图片元素的示意图:

浮动元素示意图

块级元素会占用一行的空间,即使它里面的内容很少,剩余的空白也会占用余下的行空间。就算我们将一个块级元素的宽度设置得很小,它也同样会占据一行空间。如下图所示:

块级元素浮动示意图-1

当块级元素被浮动之后,它的宽度基于它的内容来计算。各个浮动元素会排列成为一行。例如对上面的块级元素使用float:left;之后,得到如下图的效果:

块级元素浮动示意图-2

float属性出现之前,前端开发人员通常使用表格来完成页面的布局。这种布局方式对于复杂的页面是一个灾难,不仅编写十分困难,而且维护起来也非常困难。float属性的出现改变了这一格局。使用float属性来进行页面布局使得HTML代码非常简单,例如下图中的页面布局,使用float属性来布局,仅需要几行HTML代码:

浮动布局示意图

HTML文档的根元素不能被浮动。定位方式absolutely的元素也不能被浮动。

浮动元素会被保留在文档流中,而不是像绝对定位元素一样被从文档流中移除。绝对定位的元素被从文档流中完全移除,不会对页面中的其它元素照成影响。而浮动元素还是会对环绕在它周围的元素照成影响。

float属性不会对display属性为none的元素起作用。当一个内联元素或内联块级元素浮动之后,它会变为一个块级元素。内联表格(inline-table)被浮动之后会变为表格(table)元素。

在使用float属性时,最重要的一点是要注意浮动元素对它的父元素照成的影响。这就是所谓的清除浮动的问题。

当一个元素被浮动起来之后,它的父容器的高度(没有明确设置height属性)为容器中剩余内容的高度。浮动元素不会对其父容器的高度产生影响。如果父容器中只有一个元素,当这个元素浮动起来之后,父容器就会“坍塌”,其高度变为0。

元素浮动后父容器坍塌示意图

另外,浮动元素还有另外一个特性,一个浮动元素会影响其它容器中的文本或行内元素,如下图所示:

浮动元素影响其它容器中的文本的示意图

从上面的图中可以看到,不仅第一个容器中的文本会环绕浮动元素,第二个容器中的文本也会环绕这个浮动元素。

为了避免父容器“坍塌”和浮动元素对其它元素的影响,我们就需要清除浮动。

下面是几种常用的清除浮动的方法:

  • 1、使用一个空的元素来清除浮动:这个技术是使用一个空的<div>元素,为它设置clear属性,清除它两侧的浮动,使它“撑开”父容器的空间。
    <div style="clear:both;"></div>
    <!-- 或者 -->
    <div class="clearfix"></div>
    <style>
      .clearfix {
        clear: both;
      }
    </style>
    
  • 2、使用overflow属性来清除浮动:这是常用的清除浮动的方法之一。你可以为浮动元素的父容器设置overflow: hidden;overflow: auto;。由于IE6不支持overflow属性,你可以为父容器设置一个明确的高度来解决IE6的问题,或者使用下面的代码:
    .container {
        overflow: hidden;
        /* 或者 */
        overflow: auto;
    }
    /* IE6方案*/
    .container {
        height: 1%; 
        overflow: visible;
    }
    
  • 3、使父容器也浮动起来。
    .container {
        float:left;
    }  
    
  • 4、使用:after伪元素来清除浮动:这个技术和使用额外的<div>元素来清除浮动的原理是一样的,只不过不需要额外的元素,而是使用父容器的:after伪元素来充当这个额外的元素。
    .container:after {
        content: "."; 
        visibility: hidden; 
        display: block; 
        height: 0; 
        clear: both;
    }
    
  • 5、使用Micro-Clearfix Hack技术:这是目前使用最为广泛的清除浮动的方法。它可以兼容几乎所有的浏览器:Firefox 3.5+, Safari 4+, Chrome, Opera 9+ 和 IE 6+。
    /**
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    contenteditable attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that are clearfixed.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    
    .clearfix:after {
        clear: both;
    }
    
    /**
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */
    .clearfix {
        *zoom: 1;
    }
    

在CSS3中,有一个min-height属性,这个属性本身就可以清除元素的浮动。当为一个元素设置min-height属性之后,它会强制其尺寸大到足以容纳它里面的浮动元素。由于目前不是所有的浏览器都支持min-height属性,所以要清除浮动,建议目前还是使用Micro-Clearfix Hack技术。

官方语法
float: left | right | none | inherit   
                            

新的CSS3中,float属性新增了一些值:

float: [ left | right | top | bottom | start | end | none | <page-floats> ] && contour?
                            

参数:

  • left:元素左浮动。
  • right:元素右浮动。
  • none:元素不浮动。
  • inherit:继承父元素的浮动值。

由于CSS3中新增的值目前还没有浏览器支持,这里不做介绍。

float属性的初始值为none

应用范围

float属性可以所有的元素上。

示例代码
float: left;
float: right;
float: none;

float: inherit;                              
                            
浏览器支持

所有的现代浏览器都支持float属性。包括:Chrome, Firefox, Safari, Opera, Internet Explorer以及Android 和 iOS。

相关阅读
Previous:
上一篇:CSS属性参考 | display
Next:
下一篇:CSS属性参考 | font-family
返回顶部