小记css中float浮动问题

脱离了tabel布局的时代，div+css的布局使咱们的网站更加灵活易用，可是发现初学者老是不约而同的犯一样的错误，且有些还屡犯不改，呵呵，我想大约与我同样，不少时候作事情只追求“解决”，而没有研究其本质。 这篇博客记录下个人经验，欢迎指教。

 我今天想讲一下浮动的问题。

 看上面这张图片，这种排列的布局是再常见不过了，固定宽度，固定高度，向左浮动就解决了。可是，这个设计中内容的多少是可变的，这就意味着若是这些块中的一些内容比其余的多，就会破坏这个布局。 

 

 由于这种排列的总体性很是重要，我一边会采起很是简单的方法，超过隐藏：overflow:hidden; 固然若是是多行文字，这时你要设定元素的line-height属性，好肯定它的高度正好显示多少行文字。若是是单行，这在我前面总结的前端开发经验中有提到的，加上white-space:nowrap; text-overflow:ellipsis;属性。

 固然，最上面我放的图片很明显的就能发现它的布局混乱缘由，可是若是是相差几px的图片就不那么容易被发现了。因此，在css布局中，咱们常常遇到一个忘记清除浮动的问题，像刚刚那个例子，若是文字都恰好2行，布局作好后，若是不清除浮动，其实很难发现，可是以后跟着排列的标签，根据浏览器不一样，又可能发生兼容性的问题了。 

还有一个容易发生的浮动兼容性问题，有些刚接触的孩子，会出现这种状况：

 给leftdiv写了float:left; 以后的rightdiv却没有写float。这种写法在不少浏览器是支持的，由于外面有个div的宽度限制，因此rightdiv自动就跟着左边的div浮动了，然而在火狐浏览器缺失不行的，rightdiv会绝不留情的掉下来。 

 另外一个浮动的例子：

 遇到不知道文字长度的图文混排，通常的作法是这样的：在一个div中，把图片float:right;而后文字就环绕着图片混排了。

 介绍一篇文章：跨浏览器的inline-blockhttp://www.qianduan.net/cross-browser-inline-block.html 以上内容部分引入此文字资料，谢谢做者精彩翻译。