萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css清除浮動clearfix:after的用法詳解

css清除浮動clearfix:after的用法詳解

如果外部有一個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>
copyright © 萬盛學電腦網 all rights reserved