标签元素通过float浮动后不属于html文档流，浮动之后的元素如果需要回到文档流中就需要将前面的浮动清除。清除浮动有多种方式可以实现，最简单的方式就是在父级使用overflow:hidden来清除浮动。"overflow:hidden"可以溢出隐藏，设置该属性可以将内容区域超出来的部分隐藏使内容区域完全包含在该包含块中。利用该属性可以让父元素包住这个脱离了文档流的浮动元素，以达到清除包含块内子元素的浮动影响。

当然也可以用clear:both来清除浮动，clear可以指定元素对象不允许有浮动。利用clear:both清除浮动可以把float的元素拽回文档流，实现方法可以在浮动元素的尾部添加一个空的div标签并设置 clear:both属性 或在下一个元素上加clear:both，可以可以在父级div定义创建伪元素:after设置clear:both属性 。

display有两种属性情况分别是inline（同行显示）和flex（弹性布局），display:inline属性可以让元素对象实现同行并排显示（这个不是我们现在需要的效果）。display:flex是我们非常喜欢的的弹性布局方式，可以简洁、快速的实现想要的弹性布局效果。定义了display:flex属性之后可以通过 justify-content 属性调整子元素的水平对齐方式，通过align-items属性调整子元素的垂直对齐方式。当父元素宽度不够时flex默认会等比例压缩（不会自动换行），这时候我们需要通过设置 flex-wrap属性（默认为 nowrap，这里指定wrap）来使其换行即可。

以上内容是小编给大家分享的【Vue实战081：多HTML标签元素如何实现并排显示详解】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：