JS中使用 after 偽類清除浮動(dòng)實(shí)例
更新時(shí)間：2017年03月01日 14:13:00 投稿：mrr
這篇文章主要介紹了使用 after 偽類清除浮動(dòng)實(shí)例，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
以前清除浮動(dòng)的時(shí)候總是在想要清除浮動(dòng)的元素后面添加
<div style="clear:both;"></div>
或者寫在br標(biāo)簽里面來解決，但這樣會(huì)增加無語義的標(biāo)簽，下面是用after偽類實(shí)現(xiàn)，兼容多種瀏覽器
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
為兼容IE6,IE7，因?yàn)閕e6,ie7不能用after偽類。加上下面代碼
.clearfix{zoom:1}
一般情況下，如果父層內(nèi)部有浮動(dòng)(float)可能導(dǎo)致父層的高度為0，加上clearfix后就行了
HTML：
<div class="parent clearfix"> <div class="left">left</div> <div class="right">right</div> </div>
CSS:
.clearfix{zoom:1}
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.parent{
background-color:red;
width:120px;
}
.left{
float:left;
background-color:pink;
height:60px;
}
.right{
float:right;
background-color:#abcdef;
}
以上所述是小編給大家介紹的使用 after 偽類清除浮動(dòng)實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Window.Open如何在同一個(gè)標(biāo)簽頁打開
這篇文章主要介紹了Window.Open如何在同一個(gè)標(biāo)簽頁打開,需要的朋友可以參考下2014-06-06
本文給大家分享使用getDaysInOneMonth(year, month)方法獲取某個(gè)月的天數(shù)，方法超簡(jiǎn)單，感興趣的朋友一起看看吧2018-05-05
javascriptvoid(0)含義以及與"#"的區(qū)別講解
今天小編就為大家分享一篇關(guān)于javascriptvoid(0)含義以及與"#"的區(qū)別講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
用javascript獲取任意顏色的更亮或更暗顏色值示例代碼
最近在工作中遇到的一個(gè)需求，發(fā)現(xiàn)網(wǎng)上沒有相對(duì)應(yīng)的解決方法，索性自己寫一個(gè)，所以這篇文章主要給大家介紹了關(guān)于利用javascript獲取任意顏色更亮或更暗顏色值的相關(guān)資料，文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要介紹了在TypeScript中使用泛型的方法，泛型是靜態(tài)類型語言的基本特征，允許將類型作為參數(shù)傳遞給另一個(gè)類型、函數(shù)、或者其他結(jié)構(gòu)2022-06-06
微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Servlet返回的數(shù)據(jù)js解析2種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
本篇文章主要是對(duì)js根據(jù)日期判斷星座的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序使用二次貝塞爾曲線畫波浪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03