CSS样式学习-关于浮动

英伦刚强工作室

于 2022-09-12 09:14:14 发布

阅读量109

点赞数

文章标签： css 学习前端

本文链接：https://blog.youkuaiyun.com/limit123123/article/details/126813008

版权

clear.less文件中：

.clearfix(){
    &::after{
        clear: both;
        display: block;
        content: '';
    }

}

与直接写在html里面的对应class属性中的异曲同工，但单独写在一个文件中，可以更加方便的被调用，增加代码的复用性，只写在html里面要写多次，非常不方便了。

见下图：

::after 是写在HTML中的元素之后增加新内容

  .clear::after
{content: '';clear: both;display: block;}

父元素里面有子元素，但是父元素没有提前设置高度，就会导致出现所谓的高度塌陷，而清除浮动就很好的解决了这个问题了。