使用 after 伪类清除浮动

高洛峰
Lepaskan: 2017-03-01 14:57:19
asal
2433 orang telah melayarinya

以前清除浮动的时候总是在想要清除浮动的元素后面添加

 <div style="clear:both;"></div>
Salin selepas log masuk

或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
Salin selepas log masuk

为兼容IE6,IE7,因为ie6,ie7不能用after伪类。加上下面代码

 .clearfix{zoom:1}
Salin selepas log masuk

一般情况下,如果父层内部有浮动(float)可能导致父层的高度为0,加上clearfix后就行了

HTML:

 <p class="parent clearfix">
     <p class="left">left</p>
     <p class="right">right</p>
 </p>
Salin selepas log masuk

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;
}
Salin selepas log masuk

更多使用 after 伪类清除浮动相关文章请关注PHP中文网!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan