关于清除浮动

来源：4-4 sass案例（4）

Aurora_Meteor

2020-05-13 13:33:27

@mixin clearfix {
    &:after {
        visibility: hidden;
        display: block;
        content: ' ';
        clear: both;
        height: 0;
    }
}

这里设置了visibility: hidden; 和height: 0;是不可见和高度为0吧，可是为什么最后的结果是它能看到而且宽高由子元素撑开了呢？

另外，以前清除浮动好像只有另外三句

display: block;

content: ' ';

clear: both;

就可以了呀，这里干嘛还设置这没什么作用还让人迷糊的两句？

写回答

2回答

好帮手慕糖

2020-05-13

已采纳

同学你好，是子元素设置浮动，会导致父级的高度塌陷（就是子元素不能撑开父级的高度了），清除浮动之后就能解决父级高度塌陷的问题。

记住上面这个就可以了哦。下面这个只是清除浮动的一种方式，还有其他的方式，这是其他的一种。visibility: hidden; 和height: 0;是否添加都可以。

祝学习愉快~

好帮手慕糖

2020-05-13

同学你好，关于你的问题，回答如下：

1、是清除浮动之后，ul没有高度塌陷了，由子元素撑开了，不是这个伪类撑开了宽高哦。

2、是的，可以直接使用这个三个，这个没有影响，老师的书写习惯，我们也会转告老师注意这个。同学可以不写哦。

祝学习愉快~

hurora_Meteor

h 使用ul的伪类清除的ul子元素的浮动，可是ul的高度却被子元素撑开了，而隐藏不可见高度为0的是伪类？有点晕... 还是说把这个伪类使用那三句清除元素浮动另外两句是让伪类自身隐藏记住就行了？

h020-05-13

共1条回复

0 学习 · 10739 问题

查看课程

相似问题

关于clear: both

回答 1

关于display：inline-block，overflow:hidden;的问题

回答 1

关于.css.map

回答 1

有点根本没讲清楚

回答 2

老师，这个自动生成了min.css，怎么去除掉

回答 1

打开慕课网App查看更多内容