2024年前端最新学习过CSS，那你知道BFC是什么吗？，Web前端内存优化面试题

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

（3）垂直方向的margin重叠

先来看一段代码

效果如图所示

根据代码，按道理来说子元素1与子元素2之间应该相隔 20 + 50 = 70px，但实际却只有 50px ；同理，子元素2与子元素3之间应该相隔 70 + 50 = 120px，但实际却只有 70px

这是因为在垂直方向上，相邻两个元素若都设置了 margin 值，则按照较大的那个值来布局，这就是典型的垂直方向上的margin重叠问题

若此时为了避免margin重叠，我们可以给每一个子元素的外部添加一个父元素，并对父元素设置样式来触发BFC，那么就不会有上述的问题了

具体的代码：

效果如下图所示：

补充： 该案例中，我们通过给每个子元素套上了个父元素，并且都触发了BFC，从而实现了避免 margin 重叠，即我们创建了多个BFC才实现这样的效果。但是如果在一个BFC环境中，仍有多个子元素，那么这些子元素垂直方向的 margin 仍会出现重叠

（4）自适应布局

相比大家都有做过文字绕图这样的效果，其实现原理就非常的简单，只需一个 float 就可实现

效果如下图所示

按道理来说，浮动的元素脱离了正常的文档流，应该会覆盖住别的元素的内容，但为什么这里实现了文字绕图的效果呢？

其实css最初设计浮动就是为了实现文字绕图的效果，虽然浮动会覆盖别的元素，但不会覆盖住文字

此时我们为了不让浮动的元素覆盖住别的元素，我们可以触发别的元素的BFC环境，因此可以给文本元素添加 overflow: hidden 样式，效果如下图所示

看到这里，不禁想起这几年非常流行的页面布局，那就是两栏布局，如下图所示

一般像这样的布局，都是左侧宽度固定了，右侧的宽度是自适应的

因此我们就可以通过刚才避免文字绕图的方式来实现这种布局

代码如下：

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。