css3 - 求clearfix使用方法
黄舟
黄舟 2017-04-17 11:31:09
0
7
732

题主小白,在下面的例子本想让p2在下面一行显示,但clearfix并没有清除浮动。求大神指出哪里出错,跪谢。

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;
}

结果:

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

membalas semua(7)
黄舟

p1不浮动就可以了

迷茫

.clearfix:after后面加一个height:0;的属性,同时.clearfix{zoom:1;}

Peter_Zhu

clearfix 是清楚p里面元素的浮动,不是清楚本身的 你要两行显示,可以在p2加 clear:both

迷茫

clearfix 是用在浮动元素的父级元素上的
.cleafix:after { content:""; display:block; height:0; clear:both;overflow:hidden;}
.clearfix { zoom:1;}
给p0 加clearfix

左手右手慢动作

清除浮动是相对父级,如若子级有浮动...
你所用的方法对浮动元素本身是无用的
你只要让p1不浮动就可以了

黄舟

:before和:after添加到了p1的内部,相当于p1的两个子元素,自然对p1的清楚浮动没有影响

PHPzhong

在class为p0的p上增加一个clearfix的类,清楚浮动不是在本身上清除浮动

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan