CSS清除浮动详解

什么是浮动(floats)?

当该属性不等于 none 引起对象浮动时,对象将被视作块对象( block-level ),即 display 属性等于 block 。也就是说,浮动对象的 display 属性将被忽略。跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。在IE5+中, div 和 span 对象假如没有指定宽度会被分配默认的宽度,而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 styleFloat 。

浮动(floats)有何用?

浮动可以说是为排版旦生的。如页面排版和图文排版,后者大家可能更清楚。MS Office最被人认同与最高使用的就是排版,其理论上与此相同,但是实现更为复杂。

floateg
(图片来自w3c.org)

e.g.

style:

IMG { float: left }
BODY, P, IMG { margin: 2em }

HTML:

<p><img alt="This image will illustrate floats" src="img.gif" />
Some sample text that has no other...</p>

需要注意的是带有浮动属性的盒子(box),其外边距是不可叠加的。

但是在正常的文档流里面出现代有浮动属性的块级(block)时,就会出现重叠的现象。

float2p

(图片来自w3c.org)

这样的事情有时我们不想让他发生,所以就需要清除浮动(clear)。

注意在Quirks Mode下是不需要清除浮动的。

清除浮动(clear)

清除浮动就是让盒子处在一种‘闭合’的状态。

1.添加‘封底’标签。

e.g.

<div class=’container’>
    <div style=’float:left’></div>
    <div style=’float:right;’></div>
    <div style=’clear:both’></div>
</div>

这样在底部会有一个clear属性的div标签(当然你也可以用其他的任何透明的标签),来保证整个container盒子处在‘闭合’状态。

这种好处在于没有破坏标签本意,可读性比较强

坏处在于会多一些代码。

2.用:after伪类
e.g.

<div class=’container’>
    <div style=’float:left’></div>
    <div style=’float:right;’></div>
</div>

代码如下:

.clearfix:after{
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

.clearfix{
    display:inline-block;/*fix ie7*/
}

*html .clearfix{
    height:1%;
}

.clearfix{
    display:block;
}

这样的代码已经可以运行于大部分非IE浏览器,但是为什么这里会用*呢?

这里的*适用于IE7与IE MAC。

但是还有个别浏览器不行,如opera9.5。

因为这里:after后面的是visibility:hidden,这样并不能将content里面的“.”隐藏,所以还需要一些hack!

在伪类里添加如下代码:

font-size:0px;
line-height:0px;

这样就OK~

3.利用overfloat属性

利用overfloat属性可以很简单的解决浮动问题,除ie6以外的浏览器几乎都支持。

使用方法,就是在浮动标签上加上overfloat:auto这个属性即可(在ie6中可以用zoom属性),如上面的container即为

.container{overfloat:auto;_zoom:1;}

这样一段代码就OK~

但是overfloat属性的本意并不在此,所以在某些情况下会出现层级问题,还是要慎用。

用zoom方法是不可以通过W3C的,但是也是最有效的方法。

以上方法没有单一完全适用的通用方法,都是要靠大家在应用中灵活运用,才能达到最理想的效果~^_^

此条目发表在 css, 实验室 分类目录,贴了 , 标签。将固定链接加入收藏夹。