四年前端跪在CSS面试上，不可思议! CSS面试不是初级前端才会跪的吗
在面试最后，面试官突然问了我最后一个问题。怎么清除浮动。当然我很快给出最常用的方法。
.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
本来我以为，面试官还会问，还有那些方法，我脑中已经构思了好几种方法。没想到，面试官竟然问我，这个方法清除浮动的原理。
原理！当时我就有点懵逼，这个方法很常见，也经常在用，但是就没去理解过其原理。脑子在飞快的运转。
首先::after是元素的伪元素,在元素后面；
content是伪元素的内容，为空,应该只是让伪元素不显示，而display:block;height:0保证伪元素高度为零不显示，应该跟清除浮动没多大关系。
另外visibility: hidden,是让伪元素浏览器渲染但不显示，也应该跟清除浮动没多大关系。
那么就剩下clear: both，我也不清楚它的含义，但是用排除法，这应该就是清除浮动的关键。
于是，我就含糊的回答，是clear: both这个属性起了作用。但是面试官的表情告诉我，我的回答他很不满意。
后面他又叫我，简单讲一下什么是BFC，它有什么作用。我只听过KFC,哪里听过BFC，这下彻底懵逼了。平时在工作中大多数都是在写JS代码，很少去操作CSS。
虽然后来还是被录取了，但是薪资下降了2K，达不到预期。只能很遗憾了。
回到家中，上网查一下资料，做个总结，分享一下。
CSS还是前端的基本功，不管你有多年工作经验！！！别认为只有在初级前端面试中才会问CSS，警戒！！
一、清除浮动的原理
没错，clear:both还真是清除浮动的关键，被我蒙对了。
clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。
clear属性只能在块级元素上其作用，这就是清除浮动样式中display:block的作用。
另外visibility: hidden;height: 0;只要content的值为空。写不写都无所谓。
那么为什么要清除浮动，最常见的是因为外层容器高度坍塌，下面用一段代码演示一下。
<style>
.wrap {
width: 200px;
border: 1px solid #333;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.left {
float: left;
background: blue;
height: 100px;
width: 100px;
}
.right {
float: left;
background: red;
height: 50px;
width: 100px;
}
</style>
<body>
<div class='wrap'>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
为了显示清楚一点，在.wrap:after 样式中的content设置为content: ‘after伪元素’ ,此时如下图所示。
最低0.47元/天 解锁文章
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
