一个CSS样式问题

Question

<view class="shoplist">
      <ul>
        <li>
         <div class="left">
          <van-image
            width="6rem"
            height="6rem"
            fit="contain"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
         </div>
         <div class="middle">
          <div class="title">贾三打边炉</div>
          <div class="content">主营：中餐 晚餐 宵夜</div>
          <div class="other">人均消费：120元</div>
         </div>
         <div class="right">
          <van-button type="primary" size="small">导航</van-button>
         </div>
        </li>
      </ul>
    </view>

这是一个ul>li的布局
这个导航按钮怎么跑到顶部去了？我想要的是垂直居中显示

CSS：

.body .shoplist ul{
  list-style: none;
}
.body .shoplist ul li .left{
  padding:0.2rem;
  width: 26%;
  float: left;
}
.body .shoplist ul li .middle{
  width: 50%;
  float: left;
  padding-left:0.1rem;
}

.body .shoplist ul li .middle .title{
  font-size: 1rem;
  font-weight: bold;
  line-height: 2rem;
  display: block;
  float:left;
}
.body .shoplist ul li .middle .content{
  line-height: 1.5rem;
  color:#CCCCCC;
  display: block;
  float:left;
}
.body .shoplist ul li .middle .other{
  line-height: 1.5rem;
  color:#CCCCCC;
  display: block;
  float:left;
}
.body .shoplist ul li .right{
  text-align: center;
  width: 20%;
  float:left;
}

导航按钮这个div的高度好像和左边的DIV高度不同，导致这个按钮跑上去了

Answer 1

现在有很多优秀的布局方法（比如弹性盒），不建议再使用浮动了。浮动的内容是脱离文档流的，你的所有元素都是向左浮动，那么他能就会从左到右排列，直到无法排下。
高度不同不是很正常的吗，因为你没给它设定高度啊。