1、清除浮动的方式有哪些及优缺点

现在的实际工作中用浮动的已经很少了，用flex布局，标准文档流，和定位就已经可以满足大部分的布局需求了。
浮动带来的问题是盒子塌陷问题，所以就来解决这个问题吧。
什么是盒子塌陷
外部盒子本应该包裹住内部的浮动盒子，结果却没有。
问题出现的原因
父元素只包含浮动元素，那么它的高度就会塌陷为零（前提就是没有设置高度属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题很难被注意到）
因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了孩子，因为内部没有其他盒子了，所以外部盒子只包裹文本节点内容，却把内部盒子扔在外面了。
解决方案
①给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离。
缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局
②在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素，把 <div style="clear:both;"></div>放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素
③用overflow:hidden清除浮动
给外部盒子添上这个属性就好了，非常简单。
缺点：有可能造成溢出元素不可见，影响展示效果。
④用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性，再隐藏它
这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}

这也是bootstrap框架采用的清除浮动的方法。
⑤给每个盒子规定width和height，要多大给多大即可。
但这并不算什么解决方案，因为这样的布局不是内容自适应的，但如果页面内容极少发生变动，这也是一个不错的方案，因为它的兼容性是毋庸置疑的。

2、写一个加密字符串的方法

仅支持浏览器端：

function encode (str) {
    return btoa(encodeURIComponent(str));
}

function decode (str) {
    return decodeURIComponent(atob(str));
}

3、浏览器内多个标签页之间的通信方式有哪些？

①本地存储，借助 cookie, localStorage(sessionStorage 在某些场景下并不能跨标签，必须要原页面的 a 标签的 target=_blank 才行)。这些只要在同一个域名下就可以进行通信和数据的共享；
②postMessage借助 window.postMessage API 来进行消息的传递；
③如果使用vue框架那么vuex也是ok的；

4、优雅降级和渐进增强

优雅降级：先不考虑兼容，优先最新版本浏览器效果，之后再逐渐兼容低版本浏览器；
渐进增强：考虑兼容，以较低浏览器效果为主，之后再逐渐增加对新版本浏览器的支持，以内容为主，也是多数公司所采用的的方法。

4、写一个判断数据类型的方法

function type (obj) {
    return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g,'');
}

5、viewport的设置

viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport 会超出设备的显示区域（即会有横向滚动条出现）。
设备默认的 viewport 在 980 - 1024 之间。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

为了让移动端可以很好地显示页面，因此需要对 viewport 进行设置。相关的设置值如下：

6、对比下px、em、rem有什么不同？

默认情况下: 1em = 10px; 1rem = 16px

• px: 绝对固定的值，无论页面放大或者缩小都不会改变。
• em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。
• rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。
  小技巧
  如果为了方便计算 rem，可以设置 font-size= 62.5% 这样一来默认的字体就变成 10px 了。之后的 rem 就是以 10 为基准了。

7、简要描述下什么是回调函数并写一个例子出来

回调函数首先作为一个函数的参数传入，当这个函数执行后再执行的函数，往往会依赖前一个函数执行的结果。如下：
setTimeout(() => { console.log('在本轮任务最后执行!') }, 0);