四年前端在CSS面试上跪了

四年前端跪在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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值