四年前端跪在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伪元素’ ,此时如下图所示。
随后在