1.浮动布局float 取消原来的独占一行，长度为内容长度，或设置的length长度，空缺会由其他元素补足，如果空缺不足容下下一个内容，则独占一行
缺点：无法自适应网页
2.fixed固定布局，使元素固定在一个位置，不随滚动条的滚动而变化
3.栅格布局：grid 整个页面都是栅格，便捷的进行不同形状的网页自适应，vue中一般都写好了，只用对他们的属性进行简单配置就可使用。
缺点:较难实现。（最常用）
浮动布局
一般状态下，元素会纵向布局
用float：(如left）；可使元素浮动
单经过float修饰的盒子与未修饰的盒子是不同的元素了，就有了重叠现象 类名square2的盒子并未消失，只是与盒子1重叠了
使用选择器可消除边界
用<div style="clear:both";></div>可消除浮动。
