三大布局
1.标准文档流
是css默认的布局方式，让内容从左到右，从上到下排列。块级标签独占一行，行内标签并排显示，如果行级标签充满一行，则会自动换行。
2.浮动布局
浮动布局可以让块级标签并排显示。如果一个元素的子元素浮动了，就相当于这个元素中没有了内容，它的高度会变为0。也就是说，子元素的浮动会造成父元素的塌陷。在父元素中设置一个over-flow:hidden属性，可以消除子元素浮动造成的影响。一个浮动的元素，他的内部还是按照标准文档流进行布局。
3.flex布局
flex是Flexible Box的缩写，意思是“弹性布局”，可以对盒子模型提供最大的灵活性。任何一个容器都可以指定为flex布局。
浮动布局
默认的流式布局有很大的局限性，浮动的主要目的是为了让块级标签并排显示。浮动属性设置：float：left / right / none 默认属性为none（不浮动）。
浮动有一些需要注意的地方：
在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，它后面的元素会向上排。
浮动并没有完全脱离标准文档流，如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围。
如果一个元素浮动了，它会先向上移动，直到贴靠到父元素的边界，然后，如果是左浮动，就向左移动到父元素的边界，右浮动就向右移动到父元素的边界。如果多个元素浮动，它们会并排显示，如果都是同一个方向的浮动，它们会紧贴在一起。
如果一个块级标签浮动了，而且没有设置宽度，那这个标签的宽高会尽可能地小从而包裹住他的内容，这叫做包裹性。如果一个行内标签浮动了，它就可以设置自己的宽高属性了。如果有左浮动，也有右浮动，则需要把右浮动的元素写在左浮动元素的前面。
浮动造成的影响
对父元素造成的影响：父元素高度塌陷。解决方法：1.为父元素设置一个高度。2.为父元素这只一个over-flow:hidden属性。这个属性会让父元素的高度随着子元素高度的变化而变化。3.在所有的子元素后面加一个空的div，并设置一个clear:both属性（内墙法）。
对兄弟元素造成的影响：兄弟元素会向上移动。同样可以通过为受影响的元素添加clear:both属性来消除浮动的影响。
项目中最常用的抢出浮动的方法：利用伪元素 after。
.clear:after{content="";display:block;clear:both;hight:0;over-flow:hidden;}
flex布局
flex布局有四大概念：容器，项目，主轴，交叉轴。
容器：如果在一个标签设置display:flex属性，那么这个标签就是一个容器了。
项目：容器的直接子元素。
主轴：在容器中，项目按主轴方向排列，默认方向是从左到右。
交叉轴：垂直于主轴。
容器的相关属性：
- flex-direction：改变主轴的方向。可选值有 row(水平方向，起点在左边） row-recerse（水平方向，起点在右边） column（垂直方向，起点在上边） column-reverse（垂直方向，起点在下边）
- flex-wrap:定义主轴方向上如何换行。可选值有nowrap(默认，不换行) wrap(换行，第一行在上方) wrap-reverse（换行，第一行在下方）
- flex-flow：是flex-direction和flex-wrap的简写形式，默认值为row nowrap。
- justify-content：定义了项目在主轴上的对齐方式。如果主轴方向为从左到右，取值效果为 flex-start（默认值，左对齐） flex-end（右对齐） center（居中） space-between（两端对齐，项目之间的间隔相等） space-around（每个项目两侧的间隔相等）
- align-items：定义了项目在交叉轴上如何对齐。flex-start（交叉轴的起点对齐） flex-end（交叉轴的终点对齐） center（交叉轴的中点对齐） baseline（项目的第一行文字的基线对齐） stretch（默认值，如果项目没有设置高度或高度设置为auto，将占满整个容器的高度）
- align-content：当有多根主轴时，定义多根主轴的对齐方式。相当于处理垂直方向上的富于空间。
项目的相关属性
- order：定义项目的排列顺序。数值越小，排列越靠前，默认为0.
- felx-grow：定义项目的放大比例，默认为0，即不放大。
- flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，项目将缩小。
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto。
- flex：是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
- align-self：允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
