Css animation 与 float 、flex 布局问题

1、 有这样一段css html 代码　　

<div class="container">
    <div class="float-left">Biaoti</div>
    <div class="bar">
         <div class="float-left xs-3">1</div>
         <div class="float-left xs-3">2</div>
         <div class="float-left xs-3">3</div>
        <div class="float-left  xs-1">4</div>
    </div>
</div>

就是stack 图这种。

 　　1

2

3

4

5

如果我想加上动画，看起来肯定很棒，但是加上动画时，发现有问题。

1

2

3

4

5

看到了吗，这就是，就是浮动的元素在加载动画的时候，会错位，用户体验不好.如何解决这种问题呢。

 

浮动导致的会脱离文档流,

如何结决布局的这个问题呢，答案是使用flex 布局。

1

2

3

4

5

完美解决。