雨夜带刀

<p>“90%的CSS布局的兼容问题都是浮动布局引起的”，这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动，我回答过N次，但这位新手朋友好像始终记不住，总是会在这里出问题，包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确，但也反映出了前端人员在这个问题上或多或少的要纠结一番，新手会时常犯难，老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法，发觉方法还是挺多的，那么有没有一种最优的方法可以实现一劳永逸呢？且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签，空标签上定义一个清除浮动的类：</p>
<pre class="brush: c-sharp">
&lt;style type="text/css"&gt;
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
&lt;/style&gt;
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>

<p>一直想知道jQuery的选择器到底哪个性能更好,却一直苦于没有顺手的测试工具。直到前不久同事老马开发了一款测试JavaScript性能的给力小插件<a href="http://www.kacakong.com/archives/300" target="_blank">FireJSPT</a>，这个插件是基于Firebug的，可以灵活的对页面中的JS代码片断进行测试，使用的时候只要将FireJSPT的类库文件导入即可：</p>
<pre class="brush: c-sharp">
&lt;script type="text/javascript" src="firejspt.js"&gt;&lt;/script&gt;
</pre>
<p>使用FireJSPT，本博对jQuery的常用的选择器在Firefox下做了一个测试，测试环境如下：</p>
<ul>
<li>操作系统：Windows 7旗舰版本</li>
<li>浏览器：Firefox 3.6.13</li>
<li>插件：Firebug 1.60(未安装其他插件)</li>
<li>jQuery版本：1.44</li>
</ul>
<h3>层级选择器(ul li)和find的对比</h3>
<p>HTML结构如下：</p>
<pre class="brush: c-sharp">
&lt;ul class="list"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;<!–省略455个li标签–>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

最近的项目用到TAB效果的地方较多，于是自己稍微封装了下，写成了jQuery插件，方便以后使用，顺便重温下jQuery插件的实现机制。

在写插件之前对常见的TAB效果做了下总结，大体上也就那几种效果。插件力求简单易用，只要能实现常见的功能即可。

参数说明：

• event
• 触发TAB的事件类型，鼠标悬停：mouseover，鼠标点击：click，默认为mouseover。
• timeout
• 事件延迟，单位为毫秒，默认为0。
• auto
• 自动切换，单位为毫秒，默认为0。
• callback
• 回调函数，触发TAB时执行，函数的参数返回的是this。

转眼间博客已沉寂2个多月了，原因诸多，但恐怕大多是自找借口。当然最大的原因还是因为在折腾新模板，新模板没完之前就不想更新，这对于本博来说是应该最好的借口了。

原来的模板从博客上线到今天，也没用多久，可能外表看起来清爽，但是感觉不是很实用，在发表文章的时候感觉有诸多的不便，很是不爽。索性就思量着换个全新的模板。

很喜欢新模板的布局与版式，简洁，本博一贯的风格，更多的考虑了可阅读性以及用户体验。本想整个低调的灰色，奈何我对绿色太有爱了，感觉自己有点偏执了。

最后，发个原来模板的截图，就当是在这里留给纪念吧。
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/11/old_templates.jpg" alt="纪念老模板" /></div>

经常会在项目中碰到文字溢出的情况，解决起来也比较麻烦，而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止，我还没找到用CSS就能完美解决文字溢出的办法。前几天就再次碰到这个问题，之后一查，发现和迅雷的一个页面重构的面试题惊奇的相似，仔细一想，也没啥巧合不巧合的，只能说这种情况太常见了。

要求是这样的：一个新闻列表，新闻标题后紧跟着日期，新闻标题的宽度超过一定的宽度就要自动截断，但是日期必须显示完整。

花了点时间研究了下，最终的效果对于浏览器的兼容不是很理想，但我觉得也是很不错了。