css清除浮动clearfix:after的用法详解（附完整代码）_编程技术

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

2023-05-17 11:43佚名编程技术

如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开

网上常用的完整代码：

?
.clearfix:before, .clearfix:after {   
    content:"";   
    display:table;   
}   
.clearfix:after{   
    clear:both;   
    overflow:hidden;   
}   
.clearfix{   
    *zoom:1;   
}

如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因为内部没有clear，导致不能撑开。

解决方法：

CSS代码：

?
.clearfix:after {                 
content: "." ;                    
display: block ;   
height: 0 ;   
clear: both ;   
visibility: hidden ;   
}   
.clearfix{ display: inline-block; }   
      /*  Hides from IE-mac  \*/        
*html .clearfix{ height:1%; }   
.clearfix{ display:block; }   
     /*  End hide from IE-mac   \*/ 
      
//clearfix的CSS使用了after这个伪对象   
//应用clearfix的元素的结尾添加content中的内容    
//转移字符“ \ ”，Mac IE浏览器会忽略掉这段Hack，但是Windows IE不会

以下是详细解释：

首先清除浮动的原理，其实是元素留出足够多的垂直外边距给浮动的元素。

?
<div >
   <div style="float:left"></div>
</div>

这个效果是外层div不会包含内层div。因为浮动的元素脱离了原始文档流。
以上面这个为例：一般而言，有三种方式清除浮动。

第一：让外层元素也浮动，例如：

?
<div style="float:left" >
   <div style="float:left"></div>
</div>

然后再此元素之外的元素上添加clear：both效果。

第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。

具体用法：

?
<div style="clearfix" >
   <div style="float:left"></div>
</div>
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}

.clearfix{display:inline-block}
.clearfix{display:block}

其中后面的两个是为了兼容其他浏览器设置的。因为：after不是所有浏览器都支持的。

第三：利用 overflow属性

?
<div style="overflow:hidden" >
   <div style="float:left"></div>
</div>

关于clearfix:after的实际应用可以参考这篇文章： http://www.tuohang.net/css/80068.html

当前比较好的方法

?
.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}