<p>“90%的CSS布局的兼容问题都是浮动布局引起的”，这是我无意中听到某位前端人员的抱怨。</p>
<p>某位新手朋友经常问起我浮动布局的时候该如何清除浮动，我回答过N次，但这位新手朋友好像始终记不住，总是会在这里出问题，包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确，但也反映出了前端人员在这个问题上或多或少的要纠结一番，新手会时常犯难，老手也不一定就不犯傻。</p>
<p>我总结了一下以往几种清除浮动的方法，发觉方法还是挺多的，那么有没有一种最优的方法可以实现一劳永逸呢？且看下面的几种方法先。</p>
<h3>空标签法</h3>
<p>在浮动元素后加一个空标签，空标签上定义一个清除浮动的类：</p>
<pre class="brush: c-sharp">
<style type="text/css">
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
</style>
<div class="float_left">左浮动元素</div>
<div class="float_right">右浮动元素</div>
<div class="clear"></div>
</pre>
CSS清除浮动
12
经常会在项目中碰到文字溢出的情况，解决起来也比较麻烦，而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止，我还没找到用CSS就能完美解决文字溢出的办法。前几天就再次碰到这个问题，之后一查，发现和迅雷的一个页面重构的面试题惊奇的相似，仔细一想，也没啥巧合不巧合的，只能说这种情况太常见了。
要求是这样的：一个新闻列表，新闻标题后紧跟着日期，新闻标题的宽度超过一定的宽度就要自动截断，但是日期必须显示完整。
花了点时间研究了下，最终的效果对于浏览器的兼容不是很理想，但我觉得也是很不错了。
现在使用HTML5的简短的Doctype声明已经成了一种流行趋势：<!DOCTYPE html>，这个HTML5的声明支持Firefox、Chrome等现代浏览器和IE6/7/8等浏览器，这个已经在本博的另一篇文章22个HTML5的初级技巧中有讲解过。
本博也在前不久也把原来的XHTML的Doctype声明换成了HTML5的Doctype声明，换过之后才发觉一个问题，所有网页上显示的图片（背景图片除外）都会在图片的下方多出3.5px，如下图所示：
Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。
1. 新的Doctype声明
XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。
<!DOCTYPE html>
HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合 这种格式，都会进入标准模式。