一、浮动
1.基本使用
1）作用:让块元素水平排列
2）属性名:float
3）属性值
- left：左对齐
- right：右对齐
4）特点：顶对齐； 具备行内块特点； 脱标
2.清除浮动
1）场景:浮动元素会脱标，如果父级没有高度，子级无法撑开级高度(可能导致页面布局错乱)
2）解决方法:清除浮动(清除浮动带来的影响)
- 方法一:额外标签法 在父元素内容的最后添加一个块级元素，设置CSS 属性clear: both
- 方法二:单伪元素法
- 方法三:双伪元素法（推荐）
- 方法四overflow： 父元素添加 CSS 属性overflow: hidden
二、Flex
1.认识
1）Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
2）Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
2.组成
1）设置方式:给父元素设置 display:flex，子元素可以自动挤压或拉伸
2）组成部分:
- 弹性容器
- 弹性盒子
- 主轴：默认在水平方向
- 侧轴 /交叉轴:默认在垂直方向
3.主轴对齐方式
1）属性名justify-content
2）属性值
4.侧轴对齐方式
1）属性名
- align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
- align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
2）属性值
5.修改主轴方向
1）主轴默认在水平方向，侧轴默认在垂直方向
2）属性名:flex-direction
3）属性值
6.弹性伸缩比
1）作用:控制弹性盒子的主轴方向的尺寸，
2）属性名:flex
3）属性值：整数数字，表示占用父级剩余尺寸的份数
7.弹性盒子换行
1）弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示
2）属性名:flex-wrap
3）属性值
- wrap:换行
- nowrap:不换行(默认)
8.行对齐方式
1）属性名:align-content
2）属性值
