清除浮动...

  CSS清除浮动方法一：
这是一个xhtml片段,demo里面前俩标签浮动，后面跟一个含clear class的标签是为了清楚里面的浮动元素。

XHTML DEMO:

<div  class=”demo”>

    <div class=”box1″>浮动元素1</div>

    <div class=”box2″>浮动元素2</div>

    <div class=”clear”></div>

</div>

这种方法写的样式如下：

<style type=”text/css”>

.clear{ clear:both}

</style>

CSS清除浮动方法二：

下面介绍2种方法是没有清楚浮动空标签的，个人觉得比第一种方法好。

XHTML DEMO：

<div  class=”demo”>

    <div class=”box1″>浮动元素1</div>

    <div class=”box2″>浮动元素2</div>

</div>

这种方法写的样式如下：

<style type=”text/css”>

.demo{ overflow:auto; /*==for Firefox==*/ zoom:1; /*==for IE==*/}

</style>

CSS清除浮动方法三：

XHTML DEMO：

<div  class=”demo”>

    <div class=”box1″>浮动元素1</div>

    <div class=”box2″>浮动元素2</div>

</div>

这种方法写的样式如下：

<style type=”text/css”>

.demo{  zoom:1;} /*==for IE==*/

.demo:after{ clear:both; content:”"; display:block}/*==for Firefox==*/

</style>



这三种方法你喜欢哪种呢？如果还有更好的解决方法请跟帖分享。

原文出处：http://www.topcss.cn/?p=121

个人比较喜欢用第三种:第一种添加了额外的无语义标签。
第二种在FF下会产生focus