清除浮动新说 | CSS | 前端观察

前端观察  •  扫码分享
我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。  
您的位置：首页 > CSS, Tips > 清除浮动新说

清除浮动新说
糖伴西红柿 发表于 24. Dec, 2009, 分类: CSS, Tips , 50 条评论 »
标签：css & Tips

起源： 

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
http://www.qianduan.net* Hides from IE-mac \*http://www.qianduan.net
* html .clearfix { height: 1%; }
.clearfix { display: block; }
http://www.qianduan.net* End hide from IE-mac *http://www.qianduan.net


说明：

    

  • *对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的
    
内容为空的块来为目标元素清除浮动。

  • *第二条为clearfix应用 inline-table 显示属性，仅仅针对IEhttp://www.qianduan.netMac。
    
*利用 * http://www.qianduan.net 对 IEhttp://www.qianduan.netMac 隐藏一些规则：

  • * height:1% 用来触发 IE6 下的haslayout。

  • *重新对 IEhttp://www.qianduan.netMac 外的IE应用 block 显示属性。

  • *最后一行用于结束针对 IEhttp://www.qianduan.netMac 的hack。


    由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
    
标准的路上，这个方法就不再那么与时俱进了。

    抛掉对 IEhttp://www.qianduan.netMac 的支持之后，新的清除浮动方法：


    http://www.qianduan.net* new clearfix *http://www.qianduan.net
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } http://www.qianduan.net* IE6 *http://www.qianduan.net
*:first-child+html .clearfix { zoom: 1; } http://www.qianduan.net* IE7 *http://www.qianduan.net


    说明：

    IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6http://www.qianduan.net7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6http://www.qianduan.net7的hack了。

    糖伴西红柿说：
    
Jeff Starr 在这里针对IE6http://www.qianduan.net7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6http://www.qianduan.net7 同时应用 zoom:1 或者直接就写成：


    .clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}


    以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。

    我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：

    父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。

    对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
    
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。

    

    其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo

    对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。


    .group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}


    这种情况下，html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了，css 代码却出现了一定的繁冗。而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。

    归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用 clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对 zoom 的遗忘。

    成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.

    我个人的想法是没有好与坏的区别，只有合适不合适的区别。但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。经常可见对一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如 jQuery mootools YUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃”一刀切”的思想吧。

    最后，关于为什么要采用一下这种复杂方式来针对IE6http://www.qianduan.net7，而不采用其他稍微简洁的方式，还希望大家给我指点下迷津。


    * html .clearfix             { zoom: 1; } http://www.qianduan.net* IE6 *http://www.qianduan.net
*:first-child+html .clearfix { zoom: 1; } http://www.qianduan.net* IE7 *http://www.qianduan.net


    Reference:

      

    • [1].Jeff Starr，The New Clearfix Method， December 6, 2009

    • [2].Andy Ford, Saying Goodbye to the overflow: hidden Clearing Hack, December 10th, 2009

	

      
	
      
	
	
	
	
	
	






	
       作者: 	糖伴西红柿
      
		用 Macbook 的非果粉
 follow me on twitter: @gaowhen	

	
      如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。


      您或许也会喜欢：
      • CSS Sprites：鱼翅还是三鹿？
      • 在 Mozilla UI 中书写高效率 CSS
      • 万能清除浮动样式
      • 创建简单有用的CSS Sprites
      • Firefox Bug: inlinehttp://www.qianduan.netinline-block的间隙
      • 10个非常有用的CSS hack和技术
      • 使用CSS修正一切：20多个常见Bug及其修正方法
      • 纯css的圆角
      • Chrome extension 升级到 manifest version 2 的问题
      • CSS背景全攻略
	
	
	
        
		
        
	50 个评论

          
	
        • 	
          		
          		
            灰鼠  发表于Sep 1, 2010 at 16:19									
          .clear { clear: both; }
          
这种写法我一直都在用，而且不会出什么错，如果不需要用到浮动时又可以直接删掉！
		
          			回复			
            

          • 	
            		
            		
              莫斯科梨核  发表于Aug 25, 2011 at 16:46									
            这么写就添加了多余的标签
		
            			回复			
              

            • 	
              		
              		
                donxan  发表于Aug 3, 2012 at 16:58									
              可是这个方法很有效果啊要不然更多代码..
		
              			回复			





            • 	
              		
              		
                Ancf  发表于Sep 5, 2010 at 11:52									
              跟你一样 overflow:hidden; 简单粗暴有效

              如此看 以后写代码要考虑使用 after 或者 楼上兄弟的 clear
		
              			回复			

            • 	
              		
              		
                豆豆  发表于Nov 2, 2010 at 19:57									
              我也一直用:after这个伪类,但是一直都没加上这行
              
*:first-child+html .clearfix { zoom: 1; } http://www.qianduan.net* IE7 *http://www.qianduan.net
              
今天我用了一下,上面的代码,但是在IE7下显示不正常,所有的层没有高度了,都缩在一起,IE6,IE8正常…去掉上面的代码后就可以了…
              
我不太清楚这一句是不是有一定的条件才能使用?不知道大伙有没有遇到过这样的问题…真是煎熬….
		
              			回复			

            • 	
              		
              		
                前端之路  发表于Apr 6, 2011 at 13:08									
              关于css hack网上有个错误的总结:
              
http:http://www.qianduan.nethttp://www.qianduan.netwww.aa25.cnhttp://www.qianduan.netweb_w3chttp://www.qianduan.net407.shtml
              
星号(*)应该是IE6、IE7都能够识别，但是在这篇总结中认为星号只是针对IE6的hack，这样便出现了博主最后的那个迷惑。
              
所以，*:first-child+html 这句针对IE7的hack完全是多此一举。
              
顺便提一下，针对IE6的hack应该是下划线（_）
		
              			回复			

            • 	
              		
              		
                neocou  发表于Apr 6, 2011 at 22:51									
              敢问用overflow：hidden暴力清除的方法具体是？
		
              			回复			
                

              • 	
                		
                		
                  想点就点  发表于May 29, 2012 at 11:31									
                overflow：hidden
		
                			回复			



              • 	
                		
                		
                  midy  发表于May 14, 2011 at 23:04									
                overflow:hidden; _zoom:1; 使用很多年
		
                			回复			

              • 	
                		
                		
                  Ronnie  发表于Jul 27, 2011 at 13:12									
                我一直也是用clearfix这个方式清除浮动，目前暂时没想到有其他方式来清除，但是在IE7，IE6下面有的时候还是需要clear{clear：both}
		
                			回复			

              • 	
                		
                		
                  zendwang  发表于Aug 18, 2011 at 17:24									
                *+html .clearfix{height:1%}http://www.qianduan.net* ie7 *http://www.qianduan.net
                
跟上面的有啥区别呢！！！
		
                			回复			

              • 	
                		
                		
                  xiaogui2go  发表于Dec 22, 2011 at 02:16									
                * htm在ie4-6支持，*:first-child+html仅ie7支持
		
                			回复			

              • 	
                		
                		
                  pengxuelou  发表于Feb 24, 2012 at 11:08									
                一直用这个清除浮动，但有时候Ie7会有问题，还是得用clear:both;试着用了
                
* html .clearfix  { zoom: 1; } http://www.qianduan.net* IE6 *http://www.qianduan.net
                
*:first-child+html .clearfix { zoom: 1; } http://www.qianduan.net* IE7 *http://www.qianduan.net
                
但ie7里还是没有解决，不知道是什么原因。
                
我用的是这个代码：
                
.clearfix:after{content:”.”; display:block; height:0; clear:both;visibility:hidden;}
                
 *html .clearfix{height:1%;}
                
 *+html .clearfix{height:1%;}
                
请问，要怎么解决ie7里问题
		
                			回复			

              • 	
                		
                		
                  wind  发表于Jul 18, 2012 at 15:53									
                http://www.qianduan.nethttp://www.qianduan.netcss部分
                
	.float_box:after{content:”";display:table;clear:both;}
                
	.float_box{zoom:1;}

                	http://www.qianduan.nethttp://www.qianduan.nethtml 部分

                		左浮动元素
                
		右浮动元素

                一直用这种方式。未遇到问题。
		
                			回复			

              • 	
                		
                		
                  Elaine  发表于Aug 28, 2012 at 16:15									
                clear:both;完全没有问题，也不用搞那么多hack
                
无非就是多了些标签，总好过css里面一堆的hack代码，而且还不稳定
		
                			回复			

              • 	
                		
                		
                  lestorm  发表于Aug 14, 2013 at 17:40									
                图片失效
		
                			回复			


                

	« Previous
1
2





                

	
                

		发表评论