CSS浮动溢出解决方法

未解决前代码
  <ul class="task-list" style="margin-top: 0px;">
   <li class="list-li" id="1311" title="【安全库存预警】【01.01.00000002】剩余库存12，安全库存15，请尽快补充！" tag="">【安全库存预警】【01.01.00000002】剩余库存12，安全库存15，请尽快补充！<span style="float:right;padding:0 15px;font-size:20px;color:#FFF;">2017-11-25 07:00:01</span></li>
   <li class="list-li" id="1310" title="【安全库存预警】【01.01.00000001】剩余库存2，安全库存15，请尽快补充！" tag="">【安全库存预警】【01.01.00000001】剩余库存2，安全库存15，请尽快补充！<span style="float:right;padding:0 15px;font-size:20px;color:#FFF;">2017-11-25 07:00:01</span></li>
   <li class="list-li" id="1307" title="【归还预警】【234】有1个物料即将到达归还日期，请尽快处理" tag="">【归还预警】【234】有1个物料即将到达归还日期，请尽快处理<span style="float:right;padding:0 15px;font-size:20px;color:#FFF;">2017-11-24 00:00:00</span></li>
   <li class="list-li" id="1306" title="【归还预警】【34】有1个物料即将到达归还日期，请尽快处理" tag="">【归还预警】【345】有1个物料即将到达归还日期，请尽快处理<span style="float:right;padding:0 15px;font-size:20px;color:#FFF;">2017-11-23 12:00:00</span></li>
   <li class="list-li" id="1305" title="【复检预警】您有1个物料即将到达复检日期，请尽快处理" tag="">【复检预警】您有1个物料即将到达复检日期，请尽快处理<span style="float:right;padding:0 15px;font-size:20px;color:#FFF;">2017-11-23 11:53:00</span></li>
   <li class="list-li" id="1304" title="【复检预警】您有1个物料即将到达复检日期，请尽快处理" tag="">【复检预警】您有1个物料即将到达复检日期，请尽快处理<span style="float:right;padding:0 15px;font-size:20px;color:#FFF;">2017-11-23 11:49:00</span></li>
  </ul>

未解决前效果

解决方法

给li添加一个after伪元素，使用content:"."或""再元素后生成一个块级元素，并将这个块级元素隐藏，清除浮动，就可以了

        .list-li:after {
            content: "."; 
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

解决后效果