CSS清除浮动详解

什么是浮动(floats)？

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

浮动(floats)有何用？

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

（图片来自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)时，就会出现重叠的现象。

（图片来自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伪类

代码如下：

.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的，但是也是最有效的方法。

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

原创文章转载请注明：YSlove.net
本文固定链接:http://yslove.net/2009/07/css-clear-float/

Tags: css, xhtml

RSS 2.0
trackback