布局分类
- 固定宽，一般为960 / 1000 / 1024 px
- 不固定宽，靠文档流的原理布局
- 响应式布局，PC上固定宽度，手机上不固定宽度
三种布局思路
1，float
元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
- 兼容IE9，不响应式不给手机看
如果父元素里只有浮动元素，那它的高度会是0！想要它自适应即包含所有浮动元素，需要清除它的子元素。
一种方法叫做clearfix，即clear一个不浮动的 [::after]，CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素，伪元素。
给父元素加clearfix见下方：
container::after {
content: "";
display: block;
clear: both;
}
2，flex
flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间，必要时用负margin。
.container{
display:flex; /*or inline-flex*/
}
改变items流动方向
flex-direction:
row //行正排列，从左到右
row-reverse //行-逆排列，右到左
column //列-正排列
column-reverse //列-逆排列
改变折行
flex-warp:
nowrap，不折行
wra，折行
wrap-reverse ，反折行
改变主轴对齐方式
justify-content:
flex-start
flex-end
center
space-between
space-around
space-evenly
改变次轴对齐方式
align-items:
flex-start
flex-start
flex-end
center
stretch
baseline
多行内容
align-content:
flex-start
flex-end
center
stretch
space-between
space-around
3，grid
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
以前，只能通过复杂的CSS框架达到的效果，现在浏览器内置了。但目前只兼容最新的浏览器
