浮动布局
默认流式布局有不足，浮动布局可以使块级标签并排显示。
格式：float:left/right/none none默认的不浮动
特点：
1.浮动初衷是为了实现字围（新闻），后面才发现，浮动可以让多个块级标签并排显示。
2.在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排
3.如果多个元素浮动了，那么它们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
4.如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
5.如果元素没设置高度，那么它的高度是由里面的内容撑起来的，如果父元素内部的所有元素都浮动了，会造成该父元素的高度塌陷。
6.元素浮动对父元素造成影响：造成父元素高度塌陷。
7.元素浮动对兄弟元素造成影响。
8.浮动元素的包裹性：一个元素浮动后，这个盒子的宽度会尽可能小，小到刚好包裹住其中的内容
9.一个元素浮动后，其性质会发生变化，行级标签浮动后可以设置宽高
10.若父元素也浮动了，就不会塌陷了
11.浮动元素只是半脱离了标准文档流
12.一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
浮动的应用： 新闻资讯的字围效果、实现左右布局、小导航、多个规则盒子水平排列
元素浮动会造成的影响
1.对父元素造成的影响
父元素高度塌陷
解决：加高法：给父元素加高度（基本不用）
小偏方(overflow:hidden):原本是处理内容溢出问题，后发现也可处理父元素高度塌陷问题
clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both ---> 内qiang法
优点：clear:both专业清除浮动的 缺点：多写一个代码
2.对后面兄弟元素的影响
前面元素浮动后，该元素后面的兄弟元素会向上移动
解决：在受影响的元素上面加 clear:both
项目中最常用的清除浮动的方法：利用伪元素 .clear:after
就是写一个清除浮动的类：.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;} 然后将该类写到相关标签中即可
flex布局
一种新的布局方式
flex布局中有四大概念：
容器： 给一个标签加"display:flex;"，那该标签就变成了一个容器
橡木：容器中的直接子元素叫项目
主轴：项目默认排列顺序的方向
交叉轴：和主轴垂直的那个轴
在容器中有几个属性：
flex-direction: direction(方向) 是否要改变主轴方向
row | row-reverse | column | column-reverse
flex-wrap: 容器中项目排满一行的时候是否换行
nowrap | wrap | wrap-reverse
flex-flow: flex-direction flex-wrap 简单方法，如下：
flex-flow:column nowrap
justify-content: 处理富余空间
flex-start | flex-end | center | space-between | space-around
align-items: 项目在交叉轴上摆放的位置
flex-start | flex-end | center
align-content: 如果项目有多根主轴，决定多根主轴的排列方式，前提是项目足够撑满一行，并且允许换行
flex-start | flex-end | center | space-between | space-around | stretch
在项目中有几个属性：
order: 项目的排列顺序。数值越小排列越靠前，默认为0；
flex-grow： grow 成长 如果有富余空间，你可以让项目变大一点
flex-shrink: shrink 缩小 如果项目足够多，并且不换行，也就是说一行装不下，那么可以缩小项目
flex-basis： 项目在主轴上占据的大小em
flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。 flex:1表示平均分配富余空间
align-self: 单独去设置某一个项目的对齐方式
auto | flex-start | flex-end | center
