【面试次体验】堆糖前端开发实习生

在上一次失败的经历之后，本菜鸟非常努力的梳理羽毛（整理知识点），在两天后参加了堆糖的视频面试。这次面试经历总体来说比较好，可能是查漏补缺起到了效果，大部分的题目都能大体回答出来，加上面试官很nice~~~
Anyway，还是把面试过程整理出来。

首先还是从CSS开始，有遇到与上次面试类似题目的请参考今日头条前端实习生面试

CSS题目

1.如何实现一个三栏布局
三栏布局，问到的时候我以为是左右固定，中间自适应，后来发现他就是想考我float。

*{    margin: 0;    padding: 0;}.left,.right,.middle{    float:left;    border: solid 1px #777;    width: 30%;    margin:1.55%;}

然后面试官问我，这三个元素float了之后，对下面的元素有影响要怎么处理。

清除浮动问题我发现是前端面试CSS方面经常问的一个问题，详细可参考文章：那些年我们一起清除过的浮动。

主要的方法有添加多余标签，然后clear: both一下

<div class="left"></div><div class="middle"></div><div class="right"></div><div class="clear"></div>

然后CSS改一下

.clear{    clear: both;}

第二个方法是在父层容器添加overflow:auto属性

<div class="overflow">    <div class="left"></div>    <div class="middle"></div>    <div class="right"></div></div>

.overflow{    overflow: auto;}

第三个方法是用伪类::after

<div class="clearfix">    <div class="left"></div>    <div class="middle"></div>    <div class="right"></div></div>

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clearfix::after{    display: block;    content: "";    visibility: hidden;    clear: both;}.clearfix{    *zoom:1;}