怎么在css中使用clearfix屬性清除浮動(dòng)

發(fā)布時(shí)間：2021-04-01 16:23:19 來源：億速云閱讀：164 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了怎么在css中使用clearfix屬性清除浮動(dòng)，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

clearfix的定義：

代碼如下:

.clearfix:after {}{
content: "."; /**//*內(nèi)容為“.”就是一個(gè)英文的句號而已。也可以不寫。*/
display: block; /**//*加入的這個(gè)元素轉(zhuǎn)換為塊級元素。*/
clear: both; /**//*清除左右兩邊浮動(dòng)。*/
visibility: hidden; /**//*可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已；*/
line-height: 0; /**//*行高為0；*/
height: 0; /**//*高度為0；*/
font-size:0; /**//*字體大小為0；*/
}
.clearfix {}{ *zoom:1;} /**//*這是針對于IE6的，因?yàn)镮E6不支持:after偽類，這個(gè)神奇的zoom:1讓IE6的元素可以清除浮動(dòng)來包裹內(nèi)部元素。*/

.clearfix的原理：
1、在IE6, 7下zoom: 1會(huì)觸發(fā)hasLayout，從而使元素閉合內(nèi)部的浮動(dòng)。
2、在標(biāo)準(zhǔn)瀏覽器下，.clearfix:after這個(gè)偽類會(huì)在應(yīng)用到.clearfix的元素后面插入一個(gè)clear: both的塊級元素，從而達(dá)到清除浮動(dòng)的作用。
3、在需要清除浮動(dòng)的時(shí)候，只要寫一個(gè).clearfix就行了，然后在需要清浮動(dòng)的元素中添加clearfix類名就好了。
.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;}
/*
---------------------------------------------
采用偽類:after進(jìn)行后續(xù)空制的高度位零的偽類層清除
---------------------------------------------
*/
.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>

上述內(nèi)容就是怎么在css中使用clearfix屬性清除浮動(dòng)，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

怎么在css中使用clearfix屬性清除浮動(dòng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽