我们为大家收集整理了关于css清除浮动clearfixafter，以方便大家参考。

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。因为浮动的元素 脱离了原始文档流。

以上面这个为例：一般而言 ，有三种方式清除浮动

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

复制代码代码如下:

 

 

 

 

 

 

 

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

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

具体用法：

复制代码代码如下:

 

 

 

 

 

 

 

.clearfix:atfer{

content:".";

display:block;

visibility:hidden;

height:0;

clear:both;

}

.clearfix{display:inline-block}

.clearfix{display:block}

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

第三：利用 overflow属性

希望大家可以学会css清除浮动clearfixafter.想了解更多精彩内容，请关注我们的网站!

相关推荐：

cssExtGrid控件的配置方法