css清除浮動clearfixafter的方法

我們為大家收集整理了關於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控件的配置方法