【抖动】vue 页面动态加载，刷新抖动

抖动描述：页面刷新后，肉眼可见异常抖动，截图或用手机拍照，帧数不一致，无法捕捉。偶然概率发生。

问题分析：

1、使用父元素display:flow-root;

flow-root;是一种新的布局方式，它在块级布局方式的基础上对子元素的浮动float属性进行了修正。

举个例子，当块级元素的子元素有浮动且高度大于块级元素时就会发生父级容器高度塌陷的问题，因为float会脱离标准流，所以块级布局并不会考虑浮动元素的大小，仅仅关心子块级元素。

所以当子元素浮动很大的时候就会发生子元素溢出容器的情况。
 

2、抖动是页面样式重复挤压形成；如上图该元素区域内元素float:right；因此整个区域没有高度。当动态绑定元素内的按钮或者其他元素时，会出现刷新元素，动态绑定导致该元素高度在0和有元素高度间变换，形成抖动。

解决办法：对元素高度设置默认高度height: 40px;