应不应该使用inline-block代替float - CSDN博客
应不应该使用inline-block代替float
创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?
浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分，而不需要处理一些浮动带来的问题。
Inline-block不是什么新鲜话题了，估计你也用过。不过我最近才是用到这个属性。之前的几个站点上，有展示一系列照片的需求，我就用inline-block代替了浮动。
inline-block是什么？
是元素。这个名字的由来是因为，display设置这个值的元素，兼具行内元素（
inline elements）跟块级元素（block elements）的特征。
块级元素（block elements）,来源于。块级元素包含width
height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。行内元素（inline elements）排列方式是水平排列。行内块元素（inline-block elements）在内部他的表现类似，比如他拥有block元素的width
height,padding,border与margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下
如果你考虑了上面这些东东，你可以了解到，inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后，同样会水平排列。虽然他们实现的原理不同，但内部表现为块级元素，水平排列这种需求，浮动跟inline-block都适合实现。
inline-block和float的区别
虽然设置浮动跟设置inline-block有些特征类似，但两者的还是非常明显的:
文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的）。垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。
现在我们对块级元素设置了display：inline-block，图片左侧，元素之间出现空白。如果我们移除元素之间的空白（换行），就得到了图片右侧的效果。这是唯一的区别。(详细介绍可以参阅)
解决空白问题
你现在估计已经跃跃欲试了，不过估计不想让那些空白出现。这里有一些方法来:
删除html中的空白：不要让元素之间换行，这可能比较蛋疼，但也是一种方法，特别是你元素不多的时候。使用负边距：你可以用负边距来补齐空白。但你需要调整font-size，因为空白的宽度与这个属性有关系。我认为是0.25em，但我不确定。如果有人知道可以留言告诉我。给父元素设置font-size:0：不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0.在实际使用的时候，你还需要给子元素重新设置font-size。
什么时候使用inline-block，什么时候使用float
，取决于你的设计稿跟解决方法。如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。
最终，这可以归结为float跟inline-block的两种属性作用后的区别，你需要对其作出选择。
使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。
上图，把一系列元素设置了浮动，因为盒子二号宽度的关系，可以发现盒子五号被挤进去了（这些元素都脱离了文档流），这是图片排列中很常见的问题。
浮动、inline-block和图像排列
我使用inline-block主要是为了处理垂直对齐问题。我想这也是很多人使用这个属性的原因。我制作的很多站点都不可避免的带有一些。
若父元素中的图片等高，设置浮动就会工作正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是因为浮动后，图片脱离了文档流。
而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。
这里有个更明显的例子来体现inline-block跟float的区别：
我制作了一个来展示一下两个写法效果的区别
上面的块级元素被设置了inline-block。由于他们没有脱离文档流，所以元素不会被某个过长的列挤上来。
inline-block导航
另一种inline-block的适用场景：。通常，我们一般会设置a元素display：block然后进行浮动来制作。有时候我会直接通过对列表元素设置display:inline来制作。如果在制作中，你需要设置不同的display属性来处理浮动，那么inline-block不失为一种更好的解决方案。
当你需要将元素排列成一行或者多行时，更倾向于考虑使用inline-block代替float。当然，直接使用table也是一种方法，他毕竟是专门用来处理横向与纵向排列的元素的。
如果你需要创建一个很复杂的包含行列的布局，是你的最佳选择，不过你同样也可以考虑inline-block
我们经常使用浮动，但浮动并不是唯一的解决方案。有时候inline-block会更好，特别是你想排列一些图片，或者横向排列链接时。
Inline-block元素带有一些行内元素的特征（横向排列），同时内部也拥有块级元素的属性。这个跟浮动很类似，只不过有些区别。
这些区别决定了你该使用哪种方案。如果你很纠结问题或者横向排列元素，不妨使用inline-block。如果你需要对一个元素跟围绕他的一些元素进行更多控制，你需要浮动。
当然，table也是你处理一些问题的最佳方案。
同样我想说的，这不是什么新东西，但我会通过这篇文档还有来介绍一些应该使用但有些人尚未使用inline-block的场景。
非常感谢你阅读此文，希望这篇文章可以真正在你学习使用css的时候帮到你。当然有意见跟建议你也可以提出来~
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
如需转载烦请注明出处：
什么时候使用inline-block，什么时候使用float
，取决于你的设计稿跟解决方法。如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。
最终，这可以归结为float跟inline-block的两种属性作用后的区别，你需要对其作出选择。
使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。
上图，把一系列元素设置了浮动，因为盒子二号宽度的关系，可以发现盒子五号被挤进去了（这些元素都脱离了文档流），这是图片排列中很常见的问题。
浮动、inline-block和图像排列
我使用inline-block主要是为了处理垂直对齐问题。我想这也是很多人使用这个属性的原因。我制作的很多站点都不可避免的带有一些。
若父元素中的图片等高，设置浮动就会工作正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是因为浮动后，图片脱离了文档流。
而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。
这里有个更明显的例子来体现inline-block跟float的区别：
我制作了一个来展示一下两个写法效果的区别
上面的块级元素被设置了inline-block。由于他们没有脱离文档流，所以元素不会被某个过长的列挤上来。
inline-block导航
另一种inline-block的适用场景：。通常，我们一般会设置a元素display：block然后进行浮动来制作。有时候我会直接通过对列表元素设置display:inline来制作。如果在制作中，你需要设置不同的display属性来处理浮动，那么inline-block不失为一种更好的解决方案。
当你需要将元素排列成一行或者多行时，更倾向于考虑使用inline-block代替float。当然，直接使用table也是一种方法，他毕竟是专门用来处理横向与纵向排列的元素的。
如果你需要创建一个很复杂的包含行列的布局，是你的最佳选择，不过你同样也可以考虑inline-block
我们经常使用浮动，但浮动并不是唯一的解决方案。有时候inline-block会更好，特别是你想排列一些图片，或者横向排列链接时。
Inline-block元素带有一些行内元素的特征（横向排列），同时内部也拥有块级元素的属性。这个跟浮动很类似，只不过有些区别。
这些区别决定了你该使用哪种方案。如果你很纠结问题或者横向排列元素，不妨使用inline-block。如果你需要对一个元素跟围绕他的一些元素进行更多控制，你需要浮动。
当然，table也是你处理一些问题的最佳方案。
同样我想说的，这不是什么新东西，但我会通过这篇文档还有来介绍一些应该使用但有些人尚未使用inline-block的场景。
项目demo：
&&&&#columnContent .item_ul&li
&&&&&&&&flaot:
&&&&&&&&width:203
&&&&&&&&margin:3px 5
&&&&&&&&vertical-align:
&&&&&&&&text-align:
&&&&&&&&&&&&}
菜单居中和自适应需要根据页面的宽度计算
&&&&#columnContent .item_ul&li
&&&&&&&&display:inline-
&&&&&&&&width:203
&&&&&&&&margin:3px 5
&&&&&&&&vertical-align:
&&&&&&&&text-align:
&&&&&&&&*display:&&&
&&&&&&&&zoom:1;
菜单用ul-li标签水平排列流状显示，float:left也可实现同样的显示效果，但是float时撑开一个li标签，其他li标签会环绕，特别注意和学习float和inline-block的区别，特殊情况下利用inline-block的特殊性可以实现别样的效果
上面是在实际项目中应用，要求实现后面一张图的效果，起初li标签用的是float:left，整体样式没问题，但是展开li标签内容时，其他li标签环绕，这里又存在自适应，当页面缩小时，每行的li标签个数会减少，并且居中，曾经做过自适应和居中的计算以及考虑用table布局，现在回过头太悲区了，inline-block只需替换一个浮动样式就都解决了，细节和差异理解透彻了，才能做出更好的效果和节省更多不必要的时间
本文已收录于以下专栏：
相关文章推荐
CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?
浮动通常表现正常，但有时候搞起来会很纠结。特别是处理...
程序员们对于Restful服务应不应该在URI中加入版本信息的问题在stackoverflow上进行了积极的讨论: Best
practices for API versioning ,该问题被赞了...
看到的一篇文章，挺有感触的，分享一下。
谈谈我对攻读计算机研究生的看法
写作业时应不应该看答案？
到底应不应该上培训班？
当使用CSS开发站点布局时，浮动（float）总是做最繁重的工作。我们为大块譬如主要内容（main content）和侧边栏（sidebar）以及其内部小一些的块使用浮动（float）。浮动总是解决问...
Using inline-block to Display a Product Grid View
Hoyt●Code, CSS,...
版权声明：本文为博主原创文章，未经博主允许不得转载。
如果考虑不周之处还请同行朋友指点~~~
在前端开发过程中CSS横向布局几乎在每个项目中都会所有涉及，这种布局主要有浮动float和inlin...
作为管理者，应不应该认错？
大多数人都认为，应该认错，所以，我就不站在正面的立场上阐述观点了，大家都一致，就没得聊了。所以我个人暂时持反方观点，换个角度，说一下我的个人看法：
如果该基类要派生其它类，则一定要 virtual
基类 Coperation 的析构函数没加
virtual 时程序运行结果
可以看到加运算类没有被析构。为什么因为工厂类的成员类型为基类指...
他的最新文章
讲师：何宇健
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(4326)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'应不应该使用inline-block代替float',
blogAbstract:'
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}