CSS:关于清除浮动:clear,clearfix

sysdee 发表于 CSS 分类,标签: div 浮动 clearfix 清除 clear float
0
 
首先说一下为什么要清除浮动:
 
1、在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码
<div style=”background:#ccc;”> 
<div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> 
</div>
本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显示的时候高度几乎为0,这就是因为里面的层用了浮动,但如果强制规定外层容器的尺寸,则显得就不那么灵活了,高度就不能自动适应了。这时,如果我们在里面清除浮动
<div style=”background:#ccc;”> 
<div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> 
<div style=”clear:both”></div> 
</div>
那么显示就正常了。
 
 2、如果全部元素都浮动的话,理论上也是可以的,并且有很多网页的排版布局都已经实现了全部DIV化,但这仅限于排版布局,因为这是DIV的强项,但是包含内容这块还是让其他元素去做吧。因为如果功力不到的话,全部浮动的定位和尺寸问题不太好把握,浏览器之间显示的也不尽相同。

 

 

清除浮动的一个起源(古老):

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

说明:

  • *对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的
    内容为空的块来为目标元素清除浮动。
  • *第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。
    *利用 * / 对 IE/Mac 隐藏一些规则:
  • * height:1% 用来触发 IE6 下的haslayout。
  • *重新对 IE/Mac 外的IE应用 block 显示属性。
  • *最后一行用于结束针对 IE/Mac 的hack。

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

 

抛掉对 IE/Mac 的支持之后,新的清除浮动方法:

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

说明:

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

 

Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 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 代码却出现了一定的繁冗。而且一旦专题页面过长,或者在项目中使用,用这个清除组的方式反而会不胜其扰。

发表我的评论