“我们该怎么做？”

职业在工作内容上有很大区别，但很显然，从业者在困惑上却什么大区别：我是一个建筑设计师，我为什么就不能设计出那样的建筑？我是一名工业设计师，为什么我就不能向那些大师一样设计出那样的作品？我是一个写作工作者，但为什么写的越多越感觉自己离“作家”越远？我是一个开发工程师，为什么我的代码依然做不到赏心悦目效率非凡？

每个人都是一个行业的从业者，但我们真的合格吗？

嗯，拿设计师举例子。我在幻想我是一名所谓的被周围人称为“优秀”的设计师，在国内接受了基础教育，为了寻求更好的教育和成长去到国外继续求学。是的，我学习了很多也看到了很多，凭借我目前的经历、学历和所谓的设计能力，完全可以去一个很好的设计事务所工作。但为什么我还在困惑于如何去做一个好的设计？为什么走了那么多地方看了那么的展览也听了那么多的大师的讲授，依然会发出“他是怎么做到的”这类疑问？

因为我们太久的迷失于表面而忽视了本质。

依然拿设计师说事。为什么要设计？为了什么设计？我们的设计是为谁服务的？

OK，他会说是用户。

那么，用户是谁？用户在哪里？用户在想什么？用户想要什么？

如果一个设计师的作品不能满足用户的需求，他不会获得承认；但如果一个设计师的作品也只局限于满足用户的需求，他绝不会成功。

设计是为用户服务的，但设计的更深层次的本质是为了展示优秀的思想、文化并传播之！虽然用户本身不会这么去要求，他们第一实际想要的只是一个达标的使用价值，但上帝创造设计师这个职业的目的是希望寄托于他们伟大的创造和抽象实现能力去传播和弘扬人类优秀的文化和理念，这是本质的东西，也是一个设计师的职责。

一个优秀的有名望的设计师必然也应该是一个合格的大众心理学家，是一个优秀的文化学者，是一个美学家，是一个具备文化底蕴且有自身思想体系的开明人。

作品通过设计传达积极的文化和用户产生共鸣，作品更是因为优秀的设计能引导用户优化更深层次的思维而被流传。

一个只会用别人的成功作品的设计元素来装饰自身作品的“设计师”，纵然他可以看着对面的我把我画的像照片一样逼真，其本质也只仅仅是一个无思想的绘图熟练工。

设计真正应该去传达的是人类文化的精髓，也正是因为被赋予了积极文化的内涵，设计才会被承认、赞许和流传。

了解本质的东西，掌握本质的东西，从本质出发才会创造出无数成功且伟大的技巧、元素和作品。

但看看我们自己，是不是天天仅仅被表面的事物迷惑？我们醉心于各种表面的技巧，醉心于各种这行的流行元素和它们的搭配，甚至醉心于无关本行的人际斗争。却恰恰整体的忽略了文化这个层面。我们成了廉价的熟练工而没想过应该去成为一名优秀文化的布道者。

最后，我们彻底成了没思想的熟练工。在一次次的挣扎和看展览听讲座的困惑中一次次的发出同样的疑问：“他是怎么做到的？”

是啊，那些被称为大师的人是怎么做到的呢？

片面言论，欢迎砸砖。

重构虽是前端中的一个片段，大部分时间是在与结构、表现代码打交道，但依然有其无尽追求。基础到结构代码的合理、语义化的标签使用，样式代码良好的浏览器兼容性，及在此基础上的SEO考虑；再如眼观全局的思考，充分考虑代码的可重用性、模块化及具体的实践，及完成的页面是否具备良好的可扩展性和可移植性；再如渲染效率的思考；同行为代码实现整合的“钩子”的预留及可能出现的冲突的思考；等等…

重构中需要考虑兼顾的东西很多。从最基础的语义化方面说，一个页面在去掉样式代码后是否还具备良好的浏览体验，这涉及到对标签的使用、选择的思索。如下一张首页设计图，因网站性质要求，此首页中采用大量图片传达信息。

将在标签中插入<img>的方式做为首选，无疑会使工作变得简单，但却有损于搜索引擎对该页的兴趣，并且在无CSS样式的情况下，浏览的体验也会大打折扣。使用定义背景替代插入图片的方式，可以解决上述问题（点击查看有样式的demo ，点击查看无样式的demo）。

如此的好处可见，但同时制作周期会被拖延，效率下降。

有位前辈说过：做前端的，东西的质量和付出的时间成正比。每个前端er心中都有杆秤，采用哪种方式来制作，究竟应该出多大的力，标准应该是什么呢？是看时间紧迫，还是看收入多少，抑或是个人心情？可能人家只是要一个B，我们是该就给一个B，还是该给出一个A，或者A+？平衡点在哪里？秤砣是什么？这么做是必要的还是可选的？

同时附带崔凯的一篇博文：最好是多好？ 

希望能得到各位同学的见解经验。

 【一】先从一个简单的案例说起

先来看一段HTML代码：

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

这是一个无序列表UL，有6个子列表项LI。我们给他加上一些表现代码：

ul {
 background: #CCCCCC;
}
ul li {
 line-height:26px;
}

结果很显然，6个行高是26像素的LI元素将父容器UL在垂直方向撑开（可见的背景颜色区域可说明这点），父容器UL此时的高度等同于内部全部LI元素的行高之和。

见demo 1

但如果我们不想要一个垂直的列表，而是希望得到一个在水平方向上排列的呢？那我们可以对上面的CSS进行一个简单的修改，为所有的LI元素设置左浮动，或者设置所有LI元素的display属性为inline（但我们这里不详细讨论这个方法，因为它和我们下面要说的主角“overflow:hidden” 没什么关系）：

ul {
 background: #CCCCCC;
}
ul li {
 line-height:26px;
 float:left;
}

OK，我们看到所有LI都按照我们所想的那样在水平方向自左向右的排列了。

像上面说的，使用display:inline也可以达到同样的效果。因为这个属性是将元素设置为内联元素，而我们知道，内联元素在文档流中是在一行中按照先后顺序自左向右排列的，所以这么设置也可以做到我们想要的效果。

回到正题，此时我们有了一个水平排列的列表，但我们却发现，父容器UL的背景色不见了。

见demo 2

【二】分析

那么，是什么导致了父容器的背景色无法显示出来呢？

先来回顾一点基础：

（1）当一个元素未设置明确的宽（width）时，那么，若它是一个块元素，其自身BOX宽度——或者形象的称呼为它的“占地宽度”（水平格式化七大属性 [margin-left、border-left、padding-left、width、padding-right、border-right、margin-right] 之和）会等于其父容器的内容区（width值）宽度；若它是一个内联元素，其自身BOX宽度则同父容器内容区宽度无关，而是等于其左右外边距+左右边框宽度+左右内边距+内容部分的文字宽度。

（2）当一个元素未设置明确的高（height）时，那么，若他是一个块元素，其自身内容区高度，取决于其内部子元素，而同父元素无关；若其是内联元素，其行内框高度等同于line-height值。

需要注意的是，以上2条都只针对元素按照正常的文档流排列。

回到我们上面那个消失了背景的UL案例。当我们还未给子元素LI设置任何浮动时，LI以符合正常文档流的形式存在于父容器UL中，他们会正常的将父容器UL的高度撑大。

当我们为他的子元素LI设置了浮动时，LI实际上便脱离了正常的文档流，虽然表面上被父级控制，实际上已经长翅膀飞了，浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流（from 未来）。

因为子元素脱离了正常的文档流，不占任何正常文档流空间。所以，当我们为父容器设置了一个背景时，这个背景不会显示——因为父容器里似乎什么都没有，那些子元素都浮起来脱离文档流了。但当我们再向父容器内部写入其他一些未脱离文档流的内容时，父容器的背景才会显现。见demo 3。

【三】解决方案

OK。我们现在可以明确，这一切都是由于内部子元素的浮动造成的，按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。那么现在要做的，就是使得父容器可以自动闭合浮动元素。

有些人遇到这种问题，会为父元素设置一个明确的高度值，或者在UL标签闭合前，在里面加一个清除浮动（clear:both）的元素。这是个解决办法，但不是最佳办法。因为我们还需要考虑代码的书写效率、可重用性、可维护性及在此基础上的精简节约。想想打开一个页面的CSS文件，满眼都是写死的高度或者无语义的<br clear=”both;” />，那会是什么感觉？

使用“overflow:hidden”。

overflow:hidden 用于隐藏超出父容器内容区范围的内容。同时也可以起到清除浮动的作用，使得不处在正常文档流中的子元素回到文档流。

见demo 4 和demo 5

其他的方法可以参照文章结尾处的《清理浮动全家》及《学习CSS：我们一起认识CSS闭合浮动元素》（未找到原文出处）。

感谢室友雷晨提出的这个问题。之前只是知道出现这个问题应该如何去解决，但未深刻理解为什么overflow:hidden可以起这个作用，其背后的原理是什么。想想还是太懒，不求甚解。

感谢未来指出的错误及指点，感谢森林群里的小志给与的指点，同时感谢下列文章作者的经验分享：

• 清除浮动最简单的方法
• 清理浮动的全家
• 慎用 overflow

慰心家居网：

尚品网：

Codemoz:

愿景动画：

京师美：

Greenway China：

北师大珠海分校 法政学院：

北师大珠海分校 虚拟校园：

首页截图：

点击这里查看首页

点击这里下载首页文件

网上遍搜，没发现用的顺手的微博客系统。主要是现在能使用的微博客服务，基本上都不支持在独立博客中调用。新浪新出的围脖也只能在新浪博客中使用，实在是鸡肋。

期间用过几天人间网的服务，但人间网的Blog widget程序，我在使用中实在是很不愉快，因为他目前只提供MSN和Gtalk的机器人服务，尚不支持QQ机器人。很不顺手——因为平时最常用的就是QQ。

直到今天发现这个似乎是新搞出来的Follow5，功能不错。不但支持QQ机器人，还可以通过5Feed插件，自动将关注的网站的最新更新显示出来，很方便。

不过也有不足，浏览器直接进行网页分享的功能插件，暂时不支持IE；而且目前Follow5不容许在博客里同时调用2个帐号的Blog widget，在显示上会产生冲突，而且Blog widget插件目前不支持皮肤定制，只能自己写样式代码来改变。

Follow5默认的JS调用版Blog widget，有4个皮肤可供选择，都丑的要死，体验上很不好。没办法，只能通过Firebug查看代码JS调用的Blog widget的结构，自己写CSS样式代码来改。可以参照我博客中对其进行的code reset。

其原始的JS调用代码是：

<div><div id=”follow5_plusin_js”></div><script type=”text/javascript” charset=”utf-8″ src=”http://www.follow5.com/u_用户ID/t_1/c_3/follow5.js”></script></div>

“t_1”表示采用第一套皮肤，这个可以不管，反正要重新按照我们自己的博客风格进行样式改写。“c_3”表示默认显示3条最新信息。

我是给外层的div层添加了一个类“weibo”，万一后面改进可以调用多个呢，所以就没设置成ID。增加的CSS代码如下：

.weibo {width: 240px;border: 1px solid #E7E7E7;}
.weibo #follow5_plusin_js_side,
.weibo #follow5_plusin_js .gadget .userinfo {display:none;}
.weibo #follow5_plusin_js .gadget {background:#FFF;padding:5px;}
.weibo #follow5_plusin_js .gadget .content {color:#000;margin:0 10px 10px;font-family:Arial, Helvetica, sans-serif;}
.weibo #follow5_plusin_js .gadget .content a {color:#06C;text-decoration: none;}
.weibo #follow5_plusin_js .gadget .content a:hover {text-decoration:underline;}
.weibo #follow5_plusin_js .gadget .content span.noteattr {color:#999;font-family:Georgia;font-size:11px;}
.weibo #follow5_plusin_js .gadget code {text-indent: -9999px;display:block;width:100%;height:10px;}

对比下