css清除浮動(dòng)clearfix:after的用法詳解（附完整代碼）
我要評(píng)論網(wǎng)上常用的完整代碼：
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
*zoom:1;
}
如果外部有一個(gè)div容器，其內(nèi)部div容器設(shè)置了float樣式，則外部的容器div因?yàn)閮?nèi)部沒(méi)有clear，導(dǎo)致不能撐開(kāi)。
解決方法：
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這個(gè)偽對(duì)象
//應(yīng)用clearfix的元素的結(jié)尾添加content中的內(nèi)容
//轉(zhuǎn)移字符“ \ ”，Mac IE瀏覽器會(huì)忽略掉這段Hack，但是Windows IE不會(huì)
以下是詳細(xì)解釋：
首先 清除浮動(dòng)的原理 ，其實(shí) 是元素留出足夠多的 垂直外邊距 給浮動(dòng)的元素。
<div > <div style="float:left"></div> </div>
這個(gè)效果 是 外層div不會(huì)包含內(nèi)層div。因?yàn)楦?dòng)的元素 脫離了原始文檔流。
以上面這個(gè)為例：一般而言 ，有三種方式清除浮動(dòng)。
第一：讓外層元素也浮動(dòng)，例如：
<div style="float:left" > <div style="float:left"></div> </div>
然后 再此元素之外 的元素上添加clear：both效果。
第二：給外層div的末尾添加一個(gè)元素，并利用此元素清楚浮動(dòng)。
具體用法：
<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}
其中后面的兩個(gè) 是為了兼容其他瀏覽器設(shè)置的。因?yàn)椋篴fter不是所有瀏覽器都支持的。
第三：利用 overflow屬性
<div style="overflow:hidden" > <div style="float:left"></div> </div>
關(guān)于clearfix:after的實(shí)際應(yīng)用可以參考這篇文章： http://www.dbjr.com.cn/css/80068.html
當(dāng)前比較好的方法
.clearfix:after{content:'\20';display:block;height:0;clear:both}
.clearfix{zoom:1}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
到此這篇關(guān)于css清除浮動(dòng)clearfix:after的用法詳解（附完整代碼）的文章就介紹到這了,更多相關(guān)css clearfix內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(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中clearfix清除浮動(dòng)的用法及其原理示例介紹
大家對(duì)css中clearfix并不陌生吧，它的作用就是清除浮動(dòng)，下面對(duì)clearfix的定義及實(shí)現(xiàn)原理簡(jiǎn)要的為大家做個(gè)介紹，另外還有個(gè)不錯(cuò)的示例，喜歡的朋友不要錯(cuò)過(guò)2013-11-05clear 萬(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