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
  • 2023

css清除浮动clearfix:after的用法详解(附完整代码)

如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开 网上常用的完整代码: CSS Code复制内容到剪贴板 ...
  • mjr99999
  • mjr99999
  • 2017年07月02日 18:07
  • 202

clearfix的用法

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。看下面的例子: div 的布局如下: css的写法如下: 浏览器的...
  • chenweilong20
  • chenweilong20
  • 2016年11月20日 14:54
  • 414

关于层DIV自适应高度的问题总汇(加入clearfix方法)

我们先来看一个最普通的父层自适应子层高度的例子(通常来讲,布局时父层都是不设置高度的) .f{ width:200px; border:1px solid #000; padding: 2...
  • bixingtao
  • bixingtao
  • 2015年01月27日 21:57
  • 2304

clearfix的用法

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。看下面的例子: Div布局如下: Css代码如下: .out{bor...
  • rudy24
  • rudy24
  • 2016年09月02日 10:20
  • 192

clearfix的用法

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开。看下面的例子: Div布局如下: clearfix的用法 Css代...
  • lzh345
  • lzh345
  • 2016年10月18日 20:29
  • 122

详解 清除浮动 的多种方式(clearfix)

说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者!1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1...
  • FE_dev
  • FE_dev
  • 2017年04月02日 22:16
  • 27590

CSS之关于clearfix--清除浮动

一,什么是.clearfix 你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。 .clearfix:aft...
  • puncha
  • puncha
  • 2013年08月22日 11:17
  • 9862

用clearfix:after消除(DIV块因内部浮动而高度收缩的问题)

在写HTML代码的时候,创造在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看...
  • z69183787
  • z69183787
  • 2013年02月05日 20:07
  • 3029

伪元素在HTML5中的运用

在很久很久以前,我们就已经开始使用伪元素 在那时候的作用只有在高端浏览器饰演“清浮动” .clearfix:after{content:”";display:block;height:0;li...
  • liantianxia123
  • liantianxia123
  • 2013年01月08日 13:16
  • 258
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:clearfix的用法
举报原因:
原因补充:

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