收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 6797|回复: 27

[讨论] 下面三种清浮动方法,你喜欢哪种?

[复制链接]
发表于 2009-3-24 19:39:28 | 显示全部楼层 |阅读模式
CSS清除浮动的三种经典方法

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

[[i] 本帖最后由 karlen 于 2009-3-25 09:42 编辑 ]
发表于 2009-3-24 19:56:34 | 显示全部楼层
ie下清除浮动给个width就行,除了auto
回复 支持 反对

使用道具 举报

发表于 2009-3-24 20:22:09 | 显示全部楼层
我喜欢第一种
回复 支持 反对

使用道具 举报

发表于 2009-3-24 21:19:28 | 显示全部楼层
第3种吧。
第一种添加了额外的无语义标签。
第二种在FF下会产生focus http://www.aoao.org.cn/blog/2007/05/firefox-overflow-auto/
第三中更好些 http://www.planabc.net/2008/05/04/yui_grids_css/
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-25 09:38:36 | 显示全部楼层

回复 4# yoom 的帖子

给我加分吗!郁闷!
回复 支持 反对

使用道具 举报

发表于 2009-3-25 10:05:26 | 显示全部楼层

回复 5# karlen [楼主] 的帖子

大哥这类型的帖子在论坛里一搜一大堆。。。不过如果我可以打分的话,倒是可以考虑下
回复 支持 反对

使用道具 举报

发表于 2009-3-25 10:19:28 | 显示全部楼层
我到现在都没弄清楚第三种方法怎么使用
像这种情况,box1要相清除top上的浮动应该怎么做呀!

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-3-25 10:20:17 | 显示全部楼层
我一直用第一种,第3种是不是麻烦了点
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-25 11:49:26 | 显示全部楼层
原帖由 [i]sjq617 于 2009-3-25 10:19 发表
我到现在都没弄清楚第三种方法怎么使用
像这种情况,box1要相清除top上的浮动应该怎么做呀!
[html]



清除浮动

.top{width:200px;height:160px;float:left;background:#CCCCCC;}
.box1{width:200px;h ...


你可以在top上面加个空div ,div写上CSS clear:both
回复 支持 反对

使用道具 举报

发表于 2009-3-25 11:51:31 | 显示全部楼层

回复 9# karlen [楼主] 的帖子

那这样的话不就是第一种方法了吗?我需要知道的是第三种方法的运用。。。
回复 支持 反对

使用道具 举报

发表于 2009-3-25 11:52:25 | 显示全部楼层
一般用第一个  
回复 支持 反对

使用道具 举报

发表于 2009-5-13 00:47:09 | 显示全部楼层
一般用第二种 因为第三种第一次听说
回复 支持 反对

使用道具 举报

发表于 2009-5-13 01:57:06 | 显示全部楼层
一般用第三种,不过第一种其实很无敌。
回复 支持 反对

使用道具 举报

发表于 2009-5-13 10:33:35 | 显示全部楼层
after伪类选择器 兼容ie6(包括)以后的所有浏览器嘛
回复 支持 反对

使用道具 举报

发表于 2009-5-13 10:33:53 | 显示全部楼层
我现在用第三种。
页面上没有冗余代码。

这种近似月经贴,意义不大了。
回复 支持 反对

使用道具 举报

发表于 2009-5-13 10:55:31 | 显示全部楼层
我也用第三种方法,我同事用的是下面的方法,大家评价一下:

/* =============================********** 清楚浮动的样式处理 ***************========================= */       
.clearfix:after {}{
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}            
/* 这是对Firefox进行的处理,因为Firefox支持生成元素,而IE所有版本都不支持生成元素 */
.clearfix {}{
  display: inline-block;     
}               
/* 这是对 Mac 上的IE浏览器进行的处理 */
/**//* Hides from IE-mac \*/
* html .clearfix {}{height: 1%;}        
/* 这是对 win 上的IE浏览器进行的处理 */
.clearfix {}{display: block;}        
/* 这是对display: inline-block;进行的修改,重置为区块元素*/
/**//* End hide from IE-mac */
.clearfix{zoom:1}
html>/**/body .clearfix{overflow:hidden;}
回复 支持 反对

使用道具 举报

发表于 2009-5-13 11:29:43 | 显示全部楼层
基本上我都是用
width:100%;
display:hidden;
回复 支持 反对

使用道具 举报

发表于 2009-5-13 11:41:06 | 显示全部楼层
学习了,以前一直用第一种方法,看来落伍了,以后用第三种方法。
个人习惯,像清除这种东西可以独立写一个类,然后需要时可以直接调用。

像这样:
.clear_b{zoom:1;}
.clear_b:after{clear:both;content:" ";display:block}

<div class="demo clear_b"></div>
回复 支持 反对

使用道具 举报

发表于 2009-5-13 11:55:00 | 显示全部楼层
还是第一种吧,  我觉得比较方便, 也比较容易。^_^
回复 支持 反对

使用道具 举报

发表于 2009-5-13 14:30:16 | 显示全部楼层
第一种,代码没有意义
回复 支持 反对

使用道具 举报

发表于 2009-5-25 17:14:10 | 显示全部楼层
还是习惯第一种,
回复 支持 反对

使用道具 举报

发表于 2009-5-25 17:46:54 | 显示全部楼层

回复 17# wolfxyx 的帖子

width:100%,有些时候会出现问题,比如说有padding值,最好写成zoom:1,本身就是为ie设置的,呵呵
我更喜欢第三种写法,我一般在页面顶部,div,ul,p,dl统一清楚浮动,后面做页面不考虑这些了,门户站上还没有发现渲染慢的性能问题  
回复 支持 反对

使用道具 举报

发表于 2010-6-30 09:31:25 | 显示全部楼层

回复 1# karlen [楼主] 的帖子

提醒:最后回贴距现在 401 天,请不要无意义回复
.demo{ zoom:1;} /*==for IE==*/
貌似不起任何作用
回复 支持 反对

使用道具 举报

发表于 2010-7-6 16:55:51 | 显示全部楼层
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
回复 支持 反对

使用道具 举报

发表于 2010-7-6 17:04:47 | 显示全部楼层

回复 8# kooyle 的帖子

页面中大量存在要闭合浮动的话,第一种方法岂不是很费代码?
回复 支持 反对

使用道具 举报

发表于 2010-7-6 17:07:11 | 显示全部楼层

回复 24# sanzang1199 的帖子

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
回复 支持 反对

使用道具 举报

发表于 2010-7-7 14:09:59 | 显示全部楼层
我通常用的就是第一种
回复 支持 反对

使用道具 举报

发表于 2010-7-7 17:59:32 | 显示全部楼层

不用再讨论了

这些都是经验和讨论的结果
推荐第3种 当作清除浮动的标准吧
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-19 17:59 , Processed in 0.152932 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表