这两天大概面了5、6位应届的同学，最后往往忍不住聊的多了些，有点开复老师的感觉了。归纳下来有几个突出的问题。
1. 在公司实习学不到技术，学到的只是做事的方式
这些做事的方式（或者说技巧）有些是必要的，比如沟通方面。但更多是没有价值的，比如大公司繁琐的流程，各种毫无道理的开发规范，拖沓的做事风格等等。对于技术人员来说技巧性的东西千万不能太重。一个技术团队如果让实习生学不到专业上的东西，可以质疑其专业性了。应届生在学校，在公司如果都接触不到最专业的技术，那么他们又怎么能成长起来呢。一个恶性循环的开始。前端开发岗位的需求这么大，但始终缺少专业人才的一个根本原因吧。
2. 用的不是技术，更多是技巧
由于在学校里没有系统的前端开发课程，导致对html/css/javascript基本概念的理解非常薄弱。大部分人的学习方式是：先看书，然后觉得书和实践离得很远就直接实践，遇到问题就去网上搜，而搜到的基本都是“技巧”性的东西。或者是跟着学校里的“牛人”学，掺着各种好的、坏的经验全盘接受。比如实现一个左图右内容的显示效果，写出html和css（见下图）。这是我的一道笔试题，看起来很简单吧。但是还没有人答出最佳答案。如果去网上看，国内那些大网站们是怎么实现的，就不能怪他们了。
a方案 – 百度新闻首页：
<table> <tr> <td valign="top" class="imgtd"> <a ...><img ...></a> </td> <td valign="top">...</td> </tr> </table>
html结构丑陋，但css简单。
b方案 – 新浪微博首页：
<div class="twit_item MIB_linedot2"> <div class="twit_item_pic"> <a href="" target="_blank"> <img src="" ...> </a> </div> <div class="twit_item_content"> .... </div> </div>
css实现：
.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px;}
大部分应试者都是这个答案。用了浮动就必须定宽，结构就失去灵活性，同时必须解决浮动带来的一系列问题。
c方案 – 网易首页：
<div class="imgText-temp-1 dotline clearfix"> <div class="mod-img main-img"> <a href=""><img src="" ...></a> </div> <ul class="mod-list main-list"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> </div>
css实现：
.imgText-temp-1 { overflow:hidden;padding-left:132px;margin-bottom:3px; } .imgText-temp-1 .main-img { position:absolute;_display:inline;margin-left:-132px; }
作者意识到float的问题，他用了一个技巧：在容器左侧挤出一个132px的空白，再让.main-img定位为absolute，再向左移132px。
此方案典型的技巧性太重，不是应用技术解决问题，这是不应该提倡的。
这些写法都是欠缺对css基本概念的理解。如果理解block formatting context(块级格式化上下文)的概念， 就不会这么写了。触发了BFC的块级元素，它的边缘不会和float box重叠。所以正解是：
<div class="item"> <div class="pic">...</div> <div class="content">...</div> </div>
css实现：
.item .pic { float:left;margin-right:10px; } .item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */
demo: http://hikejun.com/demo/css/demo_list.html
笔试有几年经验的人也是鲜有答对的。在新技术风起云涌的今天，太忽略基础的东西了。
3. “搜索”式学习害人不浅
面试中有同学觉得书上写的东西不实用，更喜欢边实践边学。但往往实践中主要解决具体问题，比如要实现上面那个例子，从网上搜到一个不好的例子，自己又不足以区分好坏。然后，就把它当成一个解决问题的模式，如果没人纠正，可能几年下来都这么用。网上的资源非常丰富，要区分“技术”和“技巧”。还是那句话，对技术人员来说技巧性的东西不应该太重。
4. 热衷新技术
古人讲究温故而知新还是很有道理的。学习新技术可以给自我镀金，欠缺基础的东西就会内力不足，这样在应用的过程中就会有问题。
5. 学到“二手货”
国内前端技术社区的分享质量总体还是不高。那些照搬国外，加上自己片面认识的资源就是“二手货”。这些资源在看的时候要慧眼识珠啊。最好还是直接看第一手资料。
6. 光看不用，坐等机会
很多同学表示正在看什么什么，或正准备学什么什么。但就是没动手写过，总是希望在实习公司有实践机会。这样的机会可能永远也没有呢，完善自我的技能，是需要自己给自己创造机会，写一些demo，搞一些个人项目，参加一些技术交流，持续关注该技术的发展……坐等只能浪费时间。
693
到【灌水乐园】发言
哈，我们的面试题也有这一道题。至今木有一个满意的答案。我个人的解决方案是，左侧元素float left，右侧元素只定义margin-left
啊，这我也没想到，看来我学了太多的二手货了（而且早已不是应届生）T_T。。。
呃，貌似我就是搜索学习式，那问一下如何不走搜索学习式道路呢？看书么？还是。。。
在不让文字填充到图片下方时，个人感觉网易的方案挺好，：)
你需要实际试一下，文字不会到图片下方。
overflow本就有这个效果，防止环绕。
去掉overflow文字就会到下边了~
“防止环绕”不是overflow的功能，是overflow:hidden会触发bfc（IE6不会触发），触发了bfc的块元素的边缘不会和它相邻的float层重叠。可以有多种方式触发bfc，都会你所说的“防止环绕”的效果。“效果”是的表面的，“功能”是它自身特性，这个要在应用时区分清楚啊
关键是要主动的思考和总结。而不是被动地验证google搜索的结果
请问使用你推荐的方法实现两个item区块div并排一行如何做？我试了一下，会混在一起
…
…
…
…
你要的是这种效果吗： http://hikejun.com/demo/css/demo_list.html
.item .content 加一个 word-break:break-all;吧这样才完美
凭什么说是丑陋的？兼容性最好。
我的方案兼容性也不差啊
.item .content { overflow:hidden;zoom:1; } 你怎么不直接说用display: inline-block..
目的是触发block formatting context，用什么都可以啊。
额，好文，受益匪浅，只是对BFC没啥具体化的概念
最外层的itemdiv,它的高度是contentdiv的高度。不需要处理吗？
如果处理你会怎么处理？
简单的话就.item { overflow:hidden; }
呃····我在反思！
淘宝的方法我觉得是最好的，你这个在ie6下鼠标中间按下的效果会失效，微博那个中规中矩的也没多大问题。
“鼠标中间按下的效果会失效”是什么意思？
两个float的实现，还真不如table
就是链接没有定义L-V-H-A的样式，ie6下不定义全时会有错误显示的现象产生。:)
用overflow，ie6鼠标滚轮按下的效果会失效；两个浮动我说是中规中矩，何况你题里也没说文字超出图片高度后会怎样，如果要环绕图片你的答案不就是错的；table不评价了，不过说明你太注重扩展性了
如果这道题要求改成内容环绕图片，那a，b，c都要大改，而正解只需微调css。灵活性、扩展性是html结构设计中最重要的啊。
总结的非常好,
这些问题,甚至于不仅仅是学生有,长年在职场混的,也多少有几条常犯的…
首先，我很赞同作者的说法。
在很多公司里面，其实没有非常周到的细致的培训过程。很多自己遇到的具体的问题，还是要靠自己解决。而为了完成任务自己解决就变成了搜索式学习，解决临时问题，而没有建立知识体系。
自己要有主动性，学习从来都是自己的事情，什么时候都可以选择敷衍了事还是刨根问底。我目前也在一家国内比较不错的公司做前端相关的实习，充分意识到自己应该有这个主动性才行，而不是等着被人来教。而且我觉得，到那里都应该是这个道理吧。
要精益求精，看到作者上面的一些已经实现的方案，很显然都不够所谓的优雅。很显然有进一步优化的空间，这种想法和意识很重要。
我觉得有笔者这样想法的人难能可贵，让笔者带的人有福了。
这本书很基础 http://www.csszengarden.com
…
…
…
…
这样子的布局的时候还是padding挤出来好点，要不meta随时有机会在图片底下
不会啊，可以试试啊
我会那个第三种方法，图片的宽度比较弹性，可惜不是应届生了
呵呵～可是标准答案不是很像表格布局么
有些时候用几种手段都能实现同样的效果，但是确实少了对比、分析，这个是比较缺憾的地方，有待加强改进～可能正是由于这种小细节忽略了，最终导致无法走向顶峰～静下心来，认真、踏实学习一门知识，确实需要莫大的耐心和毅力，周围的浮躁太容易让自我放松，满足于现状～受教受教～
其实说到大公司的实习，对于我个人来说，结论往往不是那样的～可能由于自己运气比较好，进入了比较好的公司，比较好的团队，身边周围有太多优秀的人，无形中逼迫自己静下心学了很多，那段时期，对自己的非常非常大，之前在学校遇到的瓶颈，在那儿仿佛突然消失，豁然开朗起来～但是面对太多需求，赶工神马的无可避免，自然就会走上那条捷径，可能往往在以后的过程中也就“习惯”了～
说的有点儿多，总的说来就是要学会淡然，学会沉淀，牢靠的基础才能筑起摩天大楼～与大家共勉～
我喜欢网易的，深受float毒害多年，能不用float就不用它
也不能一棍子打死，float要经济的用。就像重构时代，完全不用table就是好的吗，显然是不对的。
作为一个前端初学者（以前一直做后端开发），实际经验有限，但我的解决方案也是用float，毕竟是标准方法，如果能用浮动，我一般不用margin-left这样的方法。感觉float挺好用。
不过实际中也发现一个经验，就是无论是想让img浮动到段落的左边还是右边，html中img都要放在段落前面。发现默认的文档流中，段落如果放在前面，宽度默认是容器宽度的100%，图片会掉到段落下面。而图片可能本身有默认宽高，不会有这个问题。
以前这个问题，还试过父元素position relative，然后图片采用position absolute，结果在ie6和ie7下死的一塌糊涂，心中有阴影，还是用float更好。
需要自己给自己创造机会，写一些demo，搞一些个人项目，参加一些技术交流，持续关注该技术的发展……坐等只能浪费时间。
==========================
赞这句话！谢谢提醒~我也要努力马上行动起来！
3、4、5归结下来其实是一个问题：浮躁。因为浮躁，所以不重视基础，只想速成，只追新潮。包括2的一部分，也是因为不求甚解。6提到的那些同学其实心里都明白，只是没有胆量承认自己不会罢了。
哈哈，YY的评论最好： http://shuo.douban.com/#!/Dexter_Yy/status/784562227