Vue中路由切换问题

Question

问题大致如下：

如图，点击后路由切换之后，有一部分内容突然变空了，当路由完全切换后，内容才显示出来。这是为什么呢？

切换前：

可以看出是绝对定位，并且知道宽高

切换时：

可以看出同样的内容区域变为了0

大概原因就是因为这个吧。。。

但是为什么内容区域变为了0呢？

关于绝对定位

position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body。

也没问题啊。content的父容器是position:absolute,并且在切换过程中父容器有宽高，再不济，body也是relative定位，怎么会出现高度为0的情况？

Answer 1

内部有浮动的标签。一般来说父级元素的高是子级元素的高撑起来的，但是如果子级元素有浮动，而父级元素没有设置高并且没有浮动，那么父级元素就会没有高度。你看看是不是这样的问题