在前端对多个相同的标签元素进行有序的排列是非常常见的需求，当我们有多个相似功能出现在同一个区域时我们就需要合理的排列这些元素。比如我这里的云服务提供了多个功能模块展示给用户，这个时候我们就会将每个模块所涉及到的内容打包成一个整体来设计。

在Vue相似的功能展现我们可以通过v-for来实现，modulars中的数据我们口可以通过登录直接从后台获取。这样不管有多少个模块我们都可以快速的实现DOM元素的渲染，也可以减少样式的书写，提高代码执行效率。这里每个mould都是一个功能模块的组合，里面包含了标题、图片、和功能描述等信息。

元素排序主要是通过CSS样式表来完成，我们都知道每个div盒子（class="mould"）的默认样式属性是独占一行显示，要想解决div独占一行方法通常有两种要么将该div设置浮动要么就设置display样式。而父级的div高度通常由内容撑开，宽度通常可以用父级容器的百分百进行设定。

float可以定义元素的浮动属性，使元素向左或向右移动来实现布局效果，常用来配合div标签做网页布局。float会使该元素脱离文档流但仍然会占据位置（浮动元素会生成一个区域块，不管是何种标签元素都可以），其他相邻的元素则会无视设置float属性的元素紧跟其后继续排列。如果对当前的所有元素设置浮动，那么就会当前的所有元素就会依次排列。所以利用float属性可以实现并排显示的效果，当然用完float浮动别忘了清除浮动。