float布局和inline-block布局【原创】

来源：互联网发布：淘宝炉石60包专店编辑：程序博客网时间：2024/05/24 01:02

继续今天白天的历史时间轴的课题。当时在做年代介绍文字的时候，需要用到横排技巧，当时，很自然地运用了以往一直使用的<li>横排技巧。但事后，就在想，是否可以有更简便的方法吗？<span>不就本身就是横排的吗？于是，试验了下，貌似不行，为什么呢，因为每个年代的介绍都包含了年代数值层和年代简介层，即也就是说，假如只是简单的文字等简单元素，用span一包围，也就完成了横排，但是，当内容比较复杂时，比如有DIV时，貌似就不起效果了，猜想应该是DIV的级别比SPAN高，DIV属块状元素。

然后，就很自然地想到了尝试下如何使DIV横排。一开始用inline，无果，网上一查，这对于普通换行元素起效，比如<p>。于是，改用inline-block，起效果了！

那么，既然有这么简单的横排方式，为什么大家还经常用float:left呢？于是做了下对比，发现，float:left是无缝贴合的，而inline-block则有3px的自然间隔。网上查了下，可以使用实现无缝。

晚上，回到家后，干脆对float: left，inline-block做了下对比练习和分析，结果如下。

代码如下，应该是讲得比较清晰了，了然了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><br/><div>下面示例：浮动层代码在标准层之前，且浮动层宽度比后续标准层窄</div><div id="3" style="float:left; background-color:#66F; height:50px;">浮动层，宽50</div><div id="4" style=" background-color:#F00; width:120px;" >标准层，宽120，多行我没有浮动sdfsdfsdf sdfdsdsfsdfsdfsdfsdf</div><br/><div>下面示例：浮动层代码在标准层之前，且浮动层宽度比后续标准层宽</div><div id="10" style="background-color:#FC9; float:left; width:300px;">浮动层，宽300</div><div id="9" style="background-color:#F39; width:250px;">后续标准层，宽250</div><br/><div>下面示例：流行左浮挨左浮布局</div><div id="5" style="background-color:#69C; float:left">左浮层1</div><div id="6" style="background-color:#FC9; float:left">左浮层2</div><div id="7" style="background-color:#363; width:300px;">3 浮动后续层</div><div id="8" style="background-color:#693; width:250px;">4我最标准</div><br/><div>下面示例：对div应用inline-block布局</div><div id="1" style="background-color:#993; display:inline-block">1 我也没浮</div><div id="2" style="display:inline-block; background-color:#993">222</div><br/><div>下面示例：对div应用inline-block布局，利用<!---->消除间隙</div><div id="11" style="background-color:#993; display:inline-block;">1 我也没浮</div><!----><div id="22" style="display:inline-block; background-color:#993;">222</div></body></html>

关于inline-block的深度讲解：http://www.js113.com/news/sjsx/128.html