HTML清除浮動(dòng)的幾種方法
1.父元素浮動(dòng)
給父元素設(shè)置浮動(dòng)后,子元素的浮動(dòng)會(huì)歸位,不過如果還有父元素,還需要設(shè)置。不推薦使用。
2.空標(biāo)簽設(shè)置
在元素末尾插入一個(gè)無意義標(biāo)簽,并且設(shè)置css為clear:both;
<div style="background: #000;"> <p style="float: left;color:#fff"> 我是浮動(dòng)內(nèi)容 </p> <div style="clear: both;"></div> </div>
3.設(shè)置偽類方式
使用偽類的:after方式,給清除浮動(dòng),比較流行使用這個(gè)。
<style type="text/css"> .clearfix:after{ content: '.'; display: block; height: 0; clear: both; visibility: hidden; } </style> <div style="background: #000;" class="clearfix"> <p style="float: left;color:#fff"> 我是浮動(dòng)內(nèi)容 </p> </div>
上面的css可以進(jìn)一步優(yōu)化
.clearfix:after{ content: ''; display: table; clear: both; }
4.顯示方式屬性
給父元素設(shè)置overflow,即可清除里面的浮動(dòng)
<div style="background: #000;overflow: auto;"> <p style="float: left;color:#fff"> 我是浮動(dòng)內(nèi)容 </p> </div>
BFC屬性
只要觸發(fā)了bfc,就會(huì)清除浮動(dòng)
相關(guān)觸發(fā):
overflow: auto; overflow: hidden; display: inline-block; display: table-cell; display: table-caption; position: absolute; position: fixed; float: left; float: right;
版權(quán)聲明:
作者:applek
鏈接:http://m.aaigroup.cn/htmlclearfix.html
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。
THE END