float、flex布局

前端的五种基本布局分别是：table布局、float布局、absolute布局、flexbox布局、grid布局（往后的比较新）。

float布局的认识

技术比较老了，不建议使用，了解下
我们知道在一个新建的html文件上添加的内容大概可以分为两种，它们在普通文档流（就是没有设置其他布局时，页面所默认的文档流）上的表现不同。

一种是块级元素，< div >、< p >、 < form >等等，
1.每个块元素都会都会独占一整行空间，在页面上默认从上向下排列。
2.对块的高度、宽度、margin和padding设置有效，宽度没有设置时，默认为100%。
3.块级元素中可以包含块级元素和行内元素。

一种是行内元素，< intput >、< a > 、< label>等等，
1.行内元素不会独占一整行空间，可以多个行内元素在一条水平线上排列。
2.高度和宽度设置是无效的，由内容决定。
这样的话实现文字环绕图片很是困难，float属性恰好能很简单的解决这样的问题。

float属性可以使元素脱离文档流，在一行上并行排列。但是并不是像absolute布局那样完全脱离文档流，float布局还会影响文本，可以这样说吧？float元素脱离了文档流，但是不脱离文本流。例：

<div style="height: 100px; width: 100px; background: red; float: left;"></div>
<div style="height：300px; width: 300px;  background: green;">这是一段测试文本、
    这是一段测试文本、这是一段测试文本、这是一段测试文本、 这是一段测试文本、这是一段测试文本、
    这是一段测试文本、这是一段测试文本、</div>

结果
以下是float布局的一些特性：
1.浮动元素只会影响写在它后面的元素，写在前面的元素如果不浮动，它是不会顶上去的，只会在下一行紧跟着。
2.如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。
3.浮动的特殊情况，以换行的那个元素为基准，如果同行前面有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素“卡住”。
4.浮动元素的高度不会计算在文档流中，所以子元素浮动会造成父级盒子高度坍塌。

这个例子能感觉到float的浮动：
引用于小tenten的博客

<div style="background: red; width: 400px;">
		<span>写几个字</span>
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
		<span style="background: green; float: left; width: 200px; height: 50px;">
				float
		</span>
	</div>

结果

flex布局的认识

柔性布局
Flex 基本概念：

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置。当我们设置flex-direction属性让行的方向改变为列时，会使垂直方向变为主轴，水平方向变为交叉轴。
在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。

---

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

有下面六种属性可以设置在容器上，它们分别是：

1. flex-direction: 决定主轴的方向(即项目的排列方向)
2. flex-wrap: 决定容器内项目是否可换行
3. flex-flow: flex-direction 和 flex-wrap 的简写形式
4. justify-content：定义了项目在主轴的对齐方式
5. align-items: 定义了项目在交叉轴上的对齐方式
6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

具体使用网上很多，然后有个小游戏可以很好的理解这些
http://flexboxfroggy.com/#zh-cn
以下6个属性设置在项目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self