Web前端最全立下flag）每日10道前端面试题-18 关于【盒模型】十问(1)，2024年最新oppo前端开发面试题

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

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

解决方法就是生成BFC

第六问：什么是BFC？

---

BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

第七问：那么BFC的原理是什么呢？

---

1. 内部的Box会在垂直方向上一个接一个的放置

2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）

3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

4. BFC的区域不会与float的元素区域重叠

5. 计算BFC的高度时，浮动子元素也参与计算

6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

第八问：BFC由什么条件创立?

---

1. float属性不为none

2. position属性为absolute或fixed

3. display属性为inline-block、table-cell、table-caption、flex、inline-flex

4. overflow属性不为visible（- overflow: auto/ hidden;）

总结：pdfo

第九问：BFC的使用场景有哪些呢

---

1. 可以用来自适应布局。

1. 可以清除浮动：（塌陷问题）

我是浮动元素

1. 解决垂直边距重叠：

1

2

3

第十问清除浮动的方法（最常用的4种）

---

这时候很多人会想到新建标签clear：both和float 方法，但是这两种方法并不推荐使用！

什么是clear：both

clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来

1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

big

small

额外标签法

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

不建议使用。

1. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

通过触发BFC方式，实现清除浮动

.fahter{

width: 400px;

border: 1px solid deeppink;

overflow: hidden;

}

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

不推荐使用

1. 使用after伪元素清除浮动（推荐使用）

.clearfix:after{/伪元素是行内元素 正常浏览器清除浮动方法/

content: “”;

display: block;

height: 0;

clear:both;

visibility: hidden;

}

.clearfix{

*zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行，其他浏览器不执行/

}

big

small

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

1. 使用before和after双伪元素清除浮动

前端资料汇总

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

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

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

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