我们都知道html块级元素默认是垂直排列的，而in-line元素是水平排列的，布局基本都用块级元素，比如div等常见的块级标签。那么如何横向排列块级元素呢？
这里我总结了五种方式，并简要概括了这五种方式的具体实现以及可能出现的问题。
方法1:显示:内嵌块
首先，我们必须了解block元素、inline元素和inline-block元素。
块级元素:块级元素包括宽度高度、填充、边框和边距，从上到下排列。常见的块级元素有div、p、form、ul等。有关更多块级元素，请参考https://developer.mozilla.org/en-us/docs/
行内元素：高度和宽度由内容决定，自身没法设定固定的大小，不存在垂直方向的margin和padding，排列方式是水平排列,行内元素在html所有元素占大多数，比如a,span,label,button,img,input......更多行内元素还是MDN查阅https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements行内元素:高度和宽度由内容决定，无法设置固定大小。没有垂直边距和填充，排列方式为水平。行内元素占html中所有元素的大部分，比如a、span、label、button和img。投入...欲了解更多在线元素，请参阅https://developer.mozilla.org/en-us/docs/web/html/inline元素的MDN。
这里可能有人会产生疑问，“button和img以及input等标签可以设置宽度和高度也可以设置margin与padding，为什么它确实行内元素呢？”其实html元素主要有两种划分方式，分别是“块级元素与行内元素”，“替换元素与不可替换元素”。上面介绍了第一种划分方式，下面介绍一下第二种划分方式：这里可能有人会问，“button、img、input等标签可以设置宽度和高度，也可以设置边距和填充。为什么它真的是内联元素？”其实html元素的划分主要有两种方式，即“块级元素和行内元素”和“可替换元素和不可替换元素”。上面介绍了第一种划分方法，下面介绍第二种划分方法:
替换元素：通俗的理解就是具有width和height属性的元素。替换元素类似于display:block元素，可以设置高宽与内外边距，主要包括img , input , textarea , select , object,audio和canvas在某些特定情形下为替换元素。更官方的定义https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element替换元素:通俗的理解就是具有宽度和高度属性的元素。替换元素类似于display:block元素，可以设置高度、宽度和内外边距，主要包括img、input、textarea、select、object、audio和canvas。更正式的定义是https://developer.mozilla.org/en-us/docs/web/CSS/replaced元素。
不可替代元素:除替换元素外的所有元素都是不可替代元素(O(∩_∩)O)。
经过一番讨论，我们知道display: inline-block可以水平排列元素，但这种布局可能会有一点问题，例如:
div { display:inline-block；宽度:200px高度:200px} .div1{背景:绿色；} .div2{背景:红色；}
这就是为什么我们在两个div之间发现了空间隙。为什么？因为两个标签之间有换行符，所以浏览器会在两个div之间加一个空框来表示这个换行符，这个空框的大小是font-size/2。我们可以设置div2的margin-left:-font-size/2，或者我们可以设置两个div的父标签的font-size:0。还有很多其他方式，但这只是为了吸引玉石。见张新旭的博客http://www . Zhang Xinxu . com/WordPress/2012/04/inline-block-space-remove-% E5 % 8e % BB % E9 % 99% A4 % E9 %百分之九十七B4% E8% B7% 9d/
方法二:浮动:左/右
浮动属性允许元素沿着容器的左侧或右侧水平排列，而不需要正常的文档流。
这种方法可以说是应用最广泛的，但是有一个问题。在自适应布局中，元素的高度和宽度一般不是固定的，而是会根据内容大小自动调整，这是因为如果所有子元素都是浮动元素的话会出现高折叠。
举栗子
span { float:left；宽度:200px高度:200px} .box1{背景:绿色；} .box2{背景:红色；}
首先，上一个栗子里的div被故意改成了span。其实我想表达的是，float可以隐式地将元素转换成块元素(position:absolute/fixed也可以)，所以宽度和高度可以自然设置。
那么盒子横放后会出现什么问题呢？没错。父容器已折叠。此时父容器div的高度为0，因为浮动元素会脱离正常的文档流，其父容器在计算高度时会忽略。这是我们不愿意看到的。
自然的解决方法是清除浮动。可以在父div中设置overflow:hidden，或者在最后一个子元素后添加空标记，然后将其样式设置为clear:both。更多清除浮动的方法，请百度“css清除浮动！！！！！!"
方法3:表格布局
这种布局不常用，因为它有各种各样的问题。
& middot渲染速度慢。
& middot增加html代码量，不容易维护。
& middot标记的名称不符合html的语义。table本来就是用来做桌子的，用它来做布局是非常不合适的。
& middot标签结构死，后期修改成本高。
等等，这里就不细说了。总之不要用表格布局。
方法四:绝对定位
这种方法在日常开发中也被广泛使用。如前所述，float可以使元素脱离正常的文档流，position:absolute/fixed在这里也有同样的效果。处理方法在浮动布局里已经提到了，就移到这里吧。
在这里，我要说的是位置:绝对定位，是基于它的第一个父元素和被位置定位的元素:绝对/相对/固定。如果找不到，则基于根元素。通常，父元素位置:相对和子元素位置:绝对组合使用。
方法五:css3的灵活布局
Html5的新特性，因为功能强大，兼容性差，我现在控制不了，不敢出丑。不过，w3cplus有一篇非常好的文章，如果你有兴趣的话，可以去看看http://www.w3cplus.com/css3/using-flexbox-today.html。
灵活布局因为兼容性还没有得到广泛认可，但是我觉得以后肯定会占得先机，就像我看好html视频播放器一样，flash迟早会被打败只是时间问题！！！
以上是我所知道的实现横向布局的五种方式。其实每种方式都有很多疑问。我解释和描述的只是冰山一角，没有过多考虑浏览器兼容性的问题，但还是希望对你有所帮助。
如有错误，请指正。谢谢你。