在布局的时候，很多设计都需要将元素排列在一行，使元素排列在一行的方法有多种，从兼容性和易用性来考虑，先介绍display:inline-block（显示为内联块）和float（浮动）。
float: 浮动，闻其名而知其意：使元素浮起来，脱离文档流，从而达到多个元素排列在一行的目的。浮动元素有哪些特征呢？如下所示：
支持宽高；
在一行显示；
不设置宽度时， 宽度由内容撑开 ；
立即学习“前端免费学习笔记（深入）”；
会按照指定的顺序移动，直到碰到浮动元素，或父级的边界停止；
元素浮动之后会使浮动元素父级高度塌陷；
脱离文档流；
元素浮动之后，上下margin不再叠加；
触发BFC。
inline-block:内联块，即既有内嵌的部分特征也具有块级元素的特征。如下所示：
支持宽高；
在一行显示；
代码换行会解析成空格；
不设置宽度时，宽度由内容撑开；
inline-block类型元素底部默认会有一个空隙；
inline-b类型元素上下margin不叠加；
触发BFC。
可以从这两个样式的特征中看出，它们相同的地方在于：1.支持宽高；2.在一行显示；3.不设置内容时，宽度由内容撑开；7,.上下margin不叠加以及8.触发BFC。在一行显示这一特征，决定了这两可以使元素排列在一行。那么使用差异，就得从他们不同的特征开始分析：
排列方向限定 。 浮动的第4个特征决定了它可以决定元素的排列顺序。float:left：元素从左至右排列，float:right：元素从右至左排列。而display:inline-block，只能从左往右。
是否脱离文档流。浮动元素会脱离文档流，而display:inline-block不会。所以会有这样一个现象：当第一个浮动元素或者inline-block元素已经占满一行，同时给第二个元素加margin-left:-100%,第二个浮动元素会覆盖在第二个浮动元素上面，而第二个inline-block会换行显示并再根据margin-left进行移动；
浮动元素会父级的高度塌陷。为了避免父元素的高度塌陷，一般在使用浮动的时候，都要对这一特征进行处理：给父级设置高度或者进行清浮动处理；
inline-block元素底部默认有一个空隙。在网页制作时，需要设置垂直对齐方式：vertical-align来进行空隙的消除；
inline-block类型元素html代码换行时会产生空格，为了消除空格的影响，需要：在结构中将内联元素写成一行或者在样式中给内联元素父级font-size设置为0；
从上述差异分析，已经可以看出float与inline-block的优缺点：float之后，大部分情况下需要清浮动或者设置高度。display:inline-block需在不更改默认排列方式（从左至右）的情况下才可使用，而且需要清除底部空隙和左右因为代码换行产生的空格。
以上就是css中display:inline-block与float在使元素排列在一行时使用差异的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3122005.html
