clearfix的用法

转载 2015年11月21日 11:44:51
如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:
Div布局如下:
clearfix的用法
Css代码如下:
.out{border:1px solid #F00; width:500px;}
.inner1{width:200px; height:200px; float:left; border:1px solid#00F;}
.inner2{width:200px; height:200px; float:left; border:1px solid#0F0;}
IE和FF显示如下图:
clearfix的用法
传统的人解决方法:
clearfix的用法
但是,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag &Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,最好使用下面clearfix方法。外层div加上clearfix样式。clearfix定义如下:
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}
这样修改以后显示正常。
clearfix的用法
那段代码是用来清除浮动的。
以下代码可以这么解释:
.clearfix:after{      <----在类名为“clearfix”的元素内最后面加入内容;
    content:".";    <----内容为“.”就是一个英文的句号而已。也可以不写。
    display:block;  <----加入的这个元素转换为块级元素。
    clear:both;    <----清除左右两边浮动。
    visibility:hidden;     <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;
    height:0;    <----高度为0;
   font-size:0;   <----字体大小为0;
}

整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。(这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.)

之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。
.clearfix { *zoom:1;} 
 <----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

相关文章推荐

css中clearfix清除浮动的用法

clearfix的定义:   .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/ ...
  • jkpi888
  • jkpi888
  • 2013年11月05日 13:04
  • 1853

关于clearfix:after的解释

在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原本,这个clearfix的CSS应用了after这个伪对象,它将在利用 cl...

【css】清除浮动(clearfix 和 clear)的用法

转自:http://www.cnblogs.com/yjzhu/archive/2013/07/31/3227912.html 本文主要是讲解如何在 html 中使用 clearfi...
  • ltx06
  • ltx06
  • 2015年04月24日 16:44
  • 228

闲聊CSS之关于clearfix--清除浮动

一,什么是.clearfix 你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。 .clearfix:after...

.clearfix:after clear:both

.clearfix:after clear:both 在写HTML代码的时候,创造在Firefox等符合W3C标准 的涉猎器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则...

闲聊CSS之关于clearfix--清除浮动

转自:http://www.45eggs.com/xhtml-css/2011/css-clearfix.html 一,什么是.clearfix 你只要到Google或者Bai...
  • ltx06
  • ltx06
  • 2015年04月24日 16:44
  • 264

clearfix:after 清除css浮动

转自:http://blog.sina.com.cn/s/blog_7a2f65d90100v2vp.html 在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中...
  • ltx06
  • ltx06
  • 2015年04月24日 16:41
  • 252

浮动float和清楚浮动clearfix

浮动,在HTML排版常常被使用的一个CSS属性,很多网页设计都会用到浮动,但并不是说浮动是网页排版的必需品。由于浮动具有破坏性,很多时候采用浮动反而会造成适得其反的效果。在张大神的CSS三无准则中就有...

clearfix清除浮动进化史

我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧。 首先在很多很多年以前我们常用的清除浮动是这样的。 .clear{clear:both...

翻译:micro-clearfix-hack

http://nicolasgallagher.com/micro-clearfix-hack/clearfix hack是一种无需使用标记语言就能清楚浮动的很流行的方法。本文提供了一种新的clear...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:clearfix的用法
举报原因:
原因补充:

(最多只允许输入30个字)