flex 平铺布局_flex布局（1）：display:flex 布局应用

最近越来越依赖display:flex 了。本来只是在移动端用来作弹性布局，现在在PC端，我基本用它来取代 float:left。比如昨天做的一个专题，基本都用 flex 来布局。

但是这其中的原理呢，flex布局的相对于float的优势又在哪呢。只是对这些有一个模糊的概念。

比如float:left/right 这个功能，一般用来排版。而它的高度塌缩，一些潜在的未被触发的问题，总是给人一种很“不靠谱”的感觉。

先来盘点下float的特性：

1. 脱离当前文档流。浮动盒子会贴着容器或者另一个浮动元素的边缘(包括水平方向和垂直方向的边缘)，宽度不够的话，就排到下一行。

举个例子：

}.box2{width:100px;height:150px;background:#ffbe84;float:left;

}.box3{width:100px;height:100px;background:#d4e280;float:left;

}.parent{overflow:hidden;padding:10px;border:1px solid #005e96;text-align:left;width:250px; /*这里设置宽度为250px，无法容下3个100px宽度的方块*/

/*height: 200px;*/

}