JS中使用 after 偽類清除浮動實例
更新時間：2017年03月01日 14:13:00 投稿：mrr
這篇文章主要介紹了使用 after 偽類清除浮動實例，非常不錯，具有參考借鑒價值，需要的的朋友參考下
以前清除浮動的時候總是在想要清除浮動的元素后面添加
<div style="clear:both;"></div>
或者寫在br標簽里面來解決，但這樣會增加無語義的標簽，下面是用after偽類實現(xiàn)，兼容多種瀏覽器
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
為兼容IE6,IE7，因為ie6,ie7不能用after偽類。加上下面代碼
.clearfix{zoom:1}
一般情況下，如果父層內(nèi)部有浮動(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 偽類清除浮動實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介為大家詳細紹了Bootstrap CSS布局之表單的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了javascript實現(xiàn)登錄框拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
button沒寫type=button會導(dǎo)致點擊時提交
點擊了一個彈窗中的按鈕，想到彈窗消失了，經(jīng)測試后發(fā)現(xiàn)button 沒寫type=button會導(dǎo)致點擊時提交2014-03-03
electron-builder書寫nsis腳本在安裝electron程序時安裝其他應(yīng)用程序(完美解決方案)
這篇文章主要介紹了electron-builder書寫nsis腳本在安裝electron程序時安裝其他應(yīng)用程序的解決方案,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
為了實現(xiàn)斷點續(xù)傳,研究了js的文件分片,下面這篇文章主要給大家介紹了關(guān)于js分片下載超出2G的大文件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
重置Redux的狀態(tài)數(shù)據(jù)的方法實現(xiàn)
這篇文章主要介紹了重置Redux的狀態(tài)數(shù)據(jù)的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
JS中appendChild追加子節(jié)點無效的解決方法
這篇文章主要給大家介紹了關(guān)于JS中appendChild追加子節(jié)點無效的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2018-10-10
JavaScript常用正則驗證函數(shù)實例小結(jié)【年齡,數(shù)字,Email,手機,URL,日期等】
這篇文章主要介紹了JavaScript常用正則驗證函數(shù),結(jié)合實例形式總結(jié)分析了javascript針對年齡、數(shù)字、Email、手機、URL、日期等格式常用正則驗證技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了Js控制滑輪左右滑動實例,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-02-02
JS數(shù)據(jù)格式化是在進行web前端開發(fā)時常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡單的實現(xiàn)方法,需要的朋友可以參考下2023-05-05