css3 - 求clearfix使用方法
問題描述
題主小白,在下面的例子本想讓p2在下面一行顯示,但clearfix并沒有清除浮動(dòng)。求大神指出哪里出錯(cuò),跪謝。
html:
<p class='p0'> <p class='p1 clearfix'>p1</p> <p class='p2'>p2</p></p>
css:
.p0{ width: 300px; height: 300px; background-color: seagreen;}.p1{ float: left; width: 100px; height: 100px; background-color: white;}.p2{ float: left; width: 100px; height: 100px; background-color: salmon;}.clearfix:after,.clearfix:before{ content: ’’; display: block; clear: both;}
結(jié)果:
問題解答
回答1:p1不浮動(dòng)就可以了
回答2:.clearfix:after后面加一個(gè)height:0;的屬性,同時(shí).clearfix{zoom:1;}
回答3:clearfix 是清楚p里面元素的浮動(dòng),不是清楚本身的 你要兩行顯示,可以在p2加 clear:both
回答4:clearfix 是用在浮動(dòng)元素的父級(jí)元素上的 .cleafix:after { content:''; display:block; height:0; clear:both;overflow:hidden;}.clearfix { zoom:1;}給p0 加clearfix
回答5:清除浮動(dòng)是相對(duì)父級(jí),如若子級(jí)有浮動(dòng)...你所用的方法對(duì)浮動(dòng)元素本身是無用的你只要讓p1不浮動(dòng)就可以了
回答6::before和:after添加到了p1的內(nèi)部,相當(dāng)于p1的兩個(gè)子元素,自然對(duì)p1的清楚浮動(dòng)沒有影響
回答7:在class為p0的p上增加一個(gè)clearfix的類,清楚浮動(dòng)不是在本身上清除浮動(dòng)
相關(guān)文章:
1. 網(wǎng)頁爬蟲 - 如何使用使用java抓取信息并制作一個(gè)排名系統(tǒng)?2. php對(duì)mysql提取數(shù)據(jù)那種速度更快3. javascript - immutable配合react提升性能?4. javascript - 在vue項(xiàng)目中遇到的問題:DOMException5. 如何設(shè)置一個(gè)無限循環(huán)并打破它。(Java線程)6. javascript - vue中使用prop傳遞數(shù)據(jù)問題7. python小白 自學(xué)看書遇到看不懂的地方8. shell - mysql更新錯(cuò)誤9. ubuntu如何啟動(dòng)sublime10. mysql - 在log日志中已知用戶的某一步操作,如何獲取其上一步操作?

網(wǎng)公網(wǎng)安備