css中clearfix清除浮動(dòng)的用法及其原理示例介紹
發(fā)布時(shí)間：2013-11-05 16:46:31 作者：佚名 
我要評(píng)論
我要評(píng)論大家對(duì)css中clearfix并不陌生吧，它的作用就是清除浮動(dòng)，下面對(duì)clearfix的定義及實(shí)現(xiàn)原理簡(jiǎn)要的為大家做個(gè)介紹，另外還有個(gè)不錯(cuò)的示例，喜歡的朋友不要錯(cuò)過(guò)
clearfix的定義：
.clearfix:after {}{
content: "."; /**//*內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已。也可以不寫(xiě)。*/
display: block; /**//*加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。*/
clear: both; /**//*清除左右兩邊浮動(dòng)。*/
visibility: hidden; /**//*可見(jiàn)度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已；*/
line-height: 0; /**//*行高為0；*/
height: 0; /**//*高度為0；*/
font-size:0; /**//*字體大小為0；*/
}
.clearfix {}{ *zoom:1;} /**//*這是針對(duì)于IE6的，因?yàn)镮E6不支持:after偽類(lèi)，這個(gè)神奇的zoom:1讓IE6的元素可以清除浮動(dòng)來(lái)包裹內(nèi)部元素。*/
.clearfix的原理：
1、在IE6, 7下zoom: 1會(huì)觸發(fā)hasLayout，從而使元素閉合內(nèi)部的浮動(dòng)。
2、在標(biāo)準(zhǔn)瀏覽器下，.clearfix:after這個(gè)偽類(lèi)會(huì)在應(yīng)用到.clearfix的元素后面插入一個(gè)clear: both的塊級(jí)元素，從而達(dá)到清除浮動(dòng)的作用。
3、在需要清除浮動(dòng)的時(shí)候，只要寫(xiě)一個(gè).clearfix就行了，然后在需要清浮動(dòng)的元素中 添加clearfix類(lèi)名就好了。
.clearfix的實(shí)例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清楚浮動(dòng)</title>
<style>
*{padding:0px; margin:0px;}
ul{border:3px solid #F00;}
ul li{width:50px; height:50px; float:left; background-color:#00F; list-style:none; margin-right:10px;}
/*
---------------------------------------------
采用偽類(lèi):after進(jìn)行后續(xù)空制的高度位零的偽類(lèi)層清除
---------------------------------------------
*/
.clearfix_after{zoom:1;}
.clearfix_after:after{
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<ul class="clearfix_after">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</ html>
參考資料： css用clearfix清除浮動(dòng) http://m.fzitv.net/css/32677.html
復(fù)制代碼
代碼如下:.clearfix:after {}{
content: "."; /**//*內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已。也可以不寫(xiě)。*/
display: block; /**//*加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。*/
clear: both; /**//*清除左右兩邊浮動(dòng)。*/
visibility: hidden; /**//*可見(jiàn)度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已；*/
line-height: 0; /**//*行高為0；*/
height: 0; /**//*高度為0；*/
font-size:0; /**//*字體大小為0；*/
}
.clearfix {}{ *zoom:1;} /**//*這是針對(duì)于IE6的，因?yàn)镮E6不支持:after偽類(lèi)，這個(gè)神奇的zoom:1讓IE6的元素可以清除浮動(dòng)來(lái)包裹內(nèi)部元素。*/
.clearfix的原理：
1、在IE6, 7下zoom: 1會(huì)觸發(fā)hasLayout，從而使元素閉合內(nèi)部的浮動(dòng)。
2、在標(biāo)準(zhǔn)瀏覽器下，.clearfix:after這個(gè)偽類(lèi)會(huì)在應(yīng)用到.clearfix的元素后面插入一個(gè)clear: both的塊級(jí)元素，從而達(dá)到清除浮動(dòng)的作用。
3、在需要清除浮動(dòng)的時(shí)候，只要寫(xiě)一個(gè).clearfix就行了，然后在需要清浮動(dòng)的元素中 添加clearfix類(lèi)名就好了。
.clearfix的實(shí)例
復(fù)制代碼
代碼如下:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清楚浮動(dòng)</title>
<style>
*{padding:0px; margin:0px;}
ul{border:3px solid #F00;}
ul li{width:50px; height:50px; float:left; background-color:#00F; list-style:none; margin-right:10px;}
/*
---------------------------------------------
采用偽類(lèi):after進(jìn)行后續(xù)空制的高度位零的偽類(lèi)層清除
---------------------------------------------
*/
.clearfix_after{zoom:1;}
.clearfix_after:after{
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<ul class="clearfix_after">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</ html>
參考資料： css用clearfix清除浮動(dòng) http://m.fzitv.net/css/32677.html
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇css之clearfix的用法深入理解(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2023-05-12
淺談css清除浮動(dòng)(clearfix和clear)的用法
下面小編就為大家?guī)?lái)一篇淺談css清除浮動(dòng)(clearfix 和clear)的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2023-05-12- 這篇文章主要介紹了CSS中使用clearfix清除浮動(dòng)的方法,作者列出了幾個(gè)clearfix的不同的使用方法進(jìn)行對(duì)比,需要的朋友可以參考下2015-07-09
用clearfix:after消除css浮動(dòng)解決外部div不能撐開(kāi)問(wèn)題
如果有一個(gè)DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV因?yàn)閮?nèi)部沒(méi)有clear，導(dǎo)致不能被撐開(kāi)。使用clearfix:after，可以解決這個(gè)問(wèn)題2014-06-16css清除浮動(dòng)clearfix:after的用法詳解（附完整代碼）
如果外部有一個(gè)div容器，其內(nèi)部div容器設(shè)置了float樣式，則外部的容器div因?yàn)閮?nèi)部沒(méi)有clear，導(dǎo)致不能撐開(kāi)2023-05-12clear 萬(wàn)能清除浮動(dòng)(clearfix:after)
有時(shí)候我們需要清楚浮動(dòng)的一些操作，這里介紹的是clearfix:after的實(shí)例代碼，需要的朋友可以參考下2023-05-12clearfix:after清除浮動(dòng)的用法及測(cè)試代碼
本文主要講解下css中的清除浮動(dòng)的使用，在網(wǎng)頁(yè)布局中此屬性的作用不可小視，它的存在對(duì)你的布局好壞有所影響，感興趣的朋友可以參考下哈2013-04-26overflow:hidden line-height clearfix:after使用方法介紹
overflow:hidden的作用是隱藏溢出,line-height指的是在DIV中的元素上下居中接下來(lái)詳細(xì)介紹它們的用法，感興趣的朋友可以了解下哦2013-01-08什么是clearfix (一文搞清楚css清除浮動(dòng)clearfix)
clearfix 是一種 CSS 技巧，可以在不添加新的 html 標(biāo)簽的前提下，解決讓父元素包含浮動(dòng)的子元素的問(wèn)題。這個(gè)技巧的版本是很多的，最流行的一個(gè)是 Micro Clearfix Hack2023-05-12