CSS基础 清除浮动

1.单伪元素清除法;清除浮动
.clearfix::after{
            content: '.';
            display: block;
            clear: both;
            height: 0;  /* 这两行代码是清除content里.的这个内容*/
       visibility: hidden;
        }
清除浮动之前,两个盒子重叠了,上面的盒子因为浮动高度为0

清除浮动之后,

2.双伪元素清除法
固定语句
.clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        .clearfix::after{
            clear: both;
        }
注意:在这里其作用相同,但它可以解决margin塌陷问题
    距离margin塌陷情况可以去https://www.cnblogs.com/jq-growup/p/15744795.html 看详情
3.方法三:
给父元素设置
     overflow:hidden; /*特点就是方便*/

 

posted @ 2021-12-29 19:52  嘉琦  阅读(58)  评论(0)    收藏  举报