一、float浮动布局
- 文档流
正常文档流，将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”即，正常文档流指的就是默认情况下页面元素的布局情况。如div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左到右排列。
- 脱离文档流
使得标签不再遵循文档流规则（不再占据文档流大小），处于漂浮状态。浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。例如我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。float属性值只有两个：left / right。如果出现子元素全部浮动，导致了父视图高度为0，导致了页面紊乱，可以通过给父视图添加固定高度解决。
.left {
float: left;
width: 100px;
height: 200px;
background: black;
}
.right {
float: right;
width: 100px;
height: 200px;
background: blue;
}
二、position定位布局
- 相对定位：relative
依据原本的位置进行定位，参考点：本身的位置，在原本的位置上进行偏移时，一般可以使用相对定位。相对定位的元素脱离标准文档流，不会对文档流产生影响，但是它原本的位置还是被自己占用着，别人无法占用。当进行了相对定位，基本上都要通过top, left, bottom, right来设置偏移量。
- 绝对定位：absolute
绝对定位的文档流被释放了。首先，他会查找自己的父视图是否带有定位属性，如果有，则相对于【父视图左上角的点】进行定位；如果没有，则查找父视图的父视图，以此类推，如果都没有，他会相对于原点定位。他的上下左右定位，不是平移，他是相对于父视图的距离。多个元素都进行了绝对定位，都完全脱离了标准流 ，多个元素可能发生重叠 。默认情况下，后面的元素会覆盖前面的元素。
- 固定定位：fiexd
完全脱离标准文档流。固定定位的参考点是浏览器的窗口，不会随着内容的滚动而滚动。 也需要设置偏移量：top right bottom left。语法： position:fixed。多用于网页的头部区域固定。
三、flex弹性盒子布局
flex容器：任何一个容器都可以指定为flex布局(display:flex)，其包含flex项。
flex项：(也称flex子元素)，需要布局的元素 排列方向(direction)：决定了flex项的布局方向。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
- 弹性盒布局的常用属性有7个，具体如下
display属性用于指定元素容器的类型。
flex-flow属性用于排列弹性子元素。
justify-content属性设置子元素在主轴方向的排列方式。
align-items属性用于定义子元素在侧轴上的对齐方式。
order属性用于设置子元素出现的排列顺序，数值越小，排列将会越靠前，默认为0
flex属性能够设置子元素的伸缩性
align-self属性能够覆盖容器中的align-items属性，用于设置单独的子元素如何沿着纵轴排列
我们经常遇到弹性盒子布局时，文字需居中的情况，可以通过以下方法实现：
.box1{
width: 200px;
height: 200upx;
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}
