双伪元素法清除浮动影响

最新推荐文章于 2024-07-18 14:18:51 发布

yshusencsdn

最新推荐文章于 2024-07-18 14:18:51 发布

阅读量729

点赞数

文章标签：双伪类清除浮动 css

本文链接：https://blog.csdn.net/yshusencsdn/article/details/98242698

版权

双伪元素法清除浮动影响

伪元素的写法: E 代表元素 
1: E::after {
    //作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之后
    
    content:' 文本内容';//设置伪元素的文本内容 
    
}
2: E::before {
    //作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之前
    content:'文本内容';
    
}

下面是具体的代码片段，用的时候直接将clearFix类添加到父元素身上就OK了

.clearFix::after,.clearFix::before {
    content:'.';
    line-height:0;
    font-size:0;
    height:0;
    display:block ;// 原因: 只有块级元素才能清除浮动影响
    clear:both ; 
}