1. clear:left 具体指什么？
W3C标准解释：
2. 如果父元素拥有transform属性，子元素的“固定定位”会转换为“绝对定位”:
{position: fixed;} → {position: absolute;}
3. 元素垂直居中的方式：
4. 什么是BFC，如何触发？
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block参与， 它规定了内部的Block如何布局，并且与这个区域外部毫不相干。
block: display属性为block, list-item, table的元素，会生成block。
BFC布局规则：
1)内部的Box会在垂直方向，一个接一个地放置;
2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
3)每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此;
4)BFC的区域不会与float box重叠;
5)BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此;
6)计算BFC的高度时，浮动元素也参与计算。
哪些元素会生成BFC?
1)根元素,如< html>< /html>;
2)float属性不为none;
3)position为absolute或fixed;
4)display为inline-block, table-cell, table-caption, flex, inline-flex;
5)overflow不为visible;
BFC作用：
1)浮动元素无法撑起父元素：
在通常情况下父元素的高度会被子元素撑开，而如果父元素没有设置高度，其子元素均为浮动元素，此时父元素会发生了高度坍塌，上下边界重合，即浮动元素无法撑起父元素。这时就可以用BFC来清除浮动了，将父元素整体设置为BFC环境。
2)不被浮动元素覆盖 ：
div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧块加 overflow: hidden，触发bfc来解决遮挡问题。
3)BFC解决margin塌陷问题：
margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以给双方的父元素加overflow：hidden;触发bfc解决。只有加在双方的父元素下，才能触发bfc。
5. 判断客户端是PC端还是移动端：
正则验证：
var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
if(isMobile){
h1.innerHTML="手机用户您好！";
}else{
h1.innerHTML="电脑用户您好！";
}
类型匹配：
!function(){
var flag = true;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
if(flag){
h1.innerHTML="电脑用户您好！";
}else{
h1.innerHTML="手机用户您好！";
}
}()
6. JS如何阻止事件冒泡？
什么是JS事件冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
1)event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻止默认行为;
2)return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为;
3)event.preventDefault();
事件处理过程中，不阻击事件冒泡，但阻击默认行为;
7. 如何用JS在表格中插入一行？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="添加行" onclick="add()">
<table border="1" id="tab">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
<script>var j=1;
function add(){
var tableobj =document.getElementById("tab");
var trobj =document.createElement("tr");
var tdobj = document.createElement("td");
for(var i=0;i<4;i++)
{
var tdobj=document.createElement("td");
tdobj.innerHTML=j++;
trobj.appendChild(tdobj);
}
trobj.appendChild(tdobj);
tableobj.appendChild(trobj);
}</script>
</html>
那天面试官问了我很多问题，我按类别整理了一下，把前半部分放在这里，后半部分牵涉到主流框架和高端优化，我会整理好与大家共享。可以收藏此内容，以防丢失。
前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？
