問題描述

題主小白，在下面的例子本想讓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é)果：

問題解答

p1不浮動(dòng)就可以了

.clearfix:after后面加一個(gè)height:0;的屬性，同時(shí).clearfix{zoom:1;}

clearfix 是清楚p里面元素的浮動(dòng)，不是清楚本身的 你要兩行顯示，可以在p2加 clear:both

clearfix 是用在浮動(dòng)元素的父級(jí)元素上的 .cleafix:after { content:''; display:block; height:0; clear:both;overflow:hidden;}.clearfix ｛ zoom：1；｝給p0 加clearfix

清除浮動(dòng)是相對(duì)父級(jí)，如若子級(jí)有浮動(dòng)...你所用的方法對(duì)浮動(dòng)元素本身是無用的你只要讓p1不浮動(dòng)就可以了

:before和:after添加到了p1的內(nèi)部，相當(dāng)于p1的兩個(gè)子元素，自然對(duì)p1的清楚浮動(dòng)沒有影響

在class為p0的p上增加一個(gè)clearfix的類，清楚浮動(dòng)不是在本身上清除浮動(dòng)