float在手机端的兼容

问题描述：
开发环境：混合开发（vue + cordova）
兼容机型：华为部分机
写法（栗子）：

<!--html-->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

/*css*/
ul{
  width:100%;
  height: 30px;
  overflow-x:scroll;
  white-space: nowrap;
}
li{
  float:left;
  width:100px;
  height:30px;
}

需求： 一行显示导航标题，X轴超出部分可拖动
问题： 华为部分手机（我们是内部CRM，所以暂时只兼容自己公司内部部分手机），浮动效果没用，其他机型好用。
解决方案：用flex重新布局
内部原理：本人还真不知道，请大神指教

个人总结：手机端（用手机自带浏览器的时候），对于固有的思维需要更新下了，我个人认为float很稳定了，但是没想到，还有这样的事情发生，所以，我感觉固有知识的更新真的很有必要