三三的前端面试记录（2）

1、如何消除浮动

清除浮动（Clearing Floats）通常是用于解决在容器中存在浮动元素时所带来的布局问题，特别是容器的高度无法自动适应其内部浮动元素的高度而导致的布局混乱。有几种方法可以清除浮动，下面是一些常见的方法：

1. 额外标签法：在要清除浮动的末尾添加一个空标签，再给空标签设置clear:both

2. 父元素使用 overflow 属性：将容器的 overflow 属性设置为 auto 或 hidden 可以清除浮动。这个方法的原理是告诉容器去“包裹”其中的浮动元素，从而清除浮动。

.container {
   
  overflow: auto; /* 或者 overflow: hidden; */
}

3. after伪类法：给要清除的浮动添加伪类样式clear:both

.container::after {
   
  content: "";
  display: table;
  clear: both;
}

2、z-index属性在什么情况下会失效

1. 元素的定位方式不正确
   z-index 只对设置了定位的元素有效。这意味着元素需要有 position: relative;、position: absolute;、position: fixed; 或 position: sticky; 之一。如果元素是 position: static;（默认值），z-index 将不会起作用。
2. 层叠上下文
   如果元素所在的层叠上下文不是最顶层的，则 z-index 的效果会受到限制。

3、作用域和作用域链的理解

作用域

作用域是指变量或函数可以生效的范围。制定了程序中变量或者函数的生命周期和适用范围，在JS中，主要有三种类型的作用域：
1、全局作用域（Global Scope）：
任何在全局上下文中声明的变量和函数都处于全局作用域。这些变量和函数在整个程序的任何地方都可以访问。
例如：

var globalVar = "I am global";

function globalFunction() {
   
    console.log(globalVar);
}

globalFunction(); // 输出 "I am global"

2、函数作用域（Function Scope）：
任何在函数内声明的变量和函数都处于函数作用域。这些变量和函数只能在函数内部访问。JS使用函数作用域，这意味着在函数内部声明的变量在函数外部不可见。
例如：

function myFunction() {
   
	    var functionVar = "I am local to this function";
	    console.log(functionVar);
	}
	
	myFunction(); // 输出 "I am local to this function"
	console.log(functionVar); // 抛出 ReferenceError: functionVar is not defined

3、块作用域（Block Scope）：
ES6引入了块作用域，通过let和const关键字实现。任何在块语句（如if、for循环等）内声明的变量，只能在该块内访问。
例如：

if (true) {
   
    let blockVar = "I am block scoped";
    console.log(blockVar); // 输出 "I am block scoped"
}

console.log(blockVar); // 抛出 ReferenceError: blockVar is not defined

作用域链

作用域链是指当代码在一个作用域中执行时，对变量的引用会先查找当前作用域，如果查找不到会查找外层作用域，知道查找到该变量或者到达全局作用域，这就形成了作用域链。

4、js事件循环机制

事件循环机制是指js编译器解析与执行代码的规则：
js编译器从上往下解析代码，判断代码是同步的还是异步的，如果是同步代码则立即执行，如果是异步代码，就放入任务队列，微任务放入微任务队列，宏任务放入宏任务队列，等到所有同步代码执行完毕之后再执行异步，先执行异步队列中的微任务，再执行宏任务，完成本次事件循环

• 宏任务
  setTimeout，setInterval，setImmediate ，I/O 操作，UI渲染等
• 微任务
  Promise.then()，process.nextTick，MutationObserver

例如：

console.log('script start');

setTimeout(function() {
   
  console.log('setTimeout 1');
  Promise.resolve().then(function() {
   
    console.log('promise 3');
  });
}, 0);

setTimeout(function() {
   
  console.log('setTimeout 2');
}, 0);

Promise.resolve().then(