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

ゝ一世哀愁。 2022-06-13 08:21 141阅读 0赞

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

网上常用的完整代码：

CSS Code 复制内容到剪贴板

1.  .clearfix:before, .clearfix:after \{   
2.      **content**:"";   
3.      **display**:table;   
4.  \}   
5.  .clearfix:after\{   
6.      **clear**:both;   
7.      **overflow**:hidden;   
8.  \}   
9.  .clearfix\{   
10.     \*zoom:1;   
11. \}

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

CSS Code 复制内容到剪贴板

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

以下是详细解释：

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

复制代码

代码如下:

这个效果 是 外层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属性

复制代码

代码如下: