前端学习Day9

Day9：P73-P81
学习笔记：
1.清除浮动
    场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
    解决方法：清除浮动（清除浮动带来的影响）
    方法一：额外标签法
    方法二：单伪元素法，双伪元素法
    方法三：overflow法
2.浮动-总结
    浮动属性：float，left表示左浮动，right表示右浮动
    特点：浮动后的盒子顶对齐，浮动后的盒子具有行内块的特点，父级宽度不够，浮动的子级会换行，浮动后的盒子脱标……
3.flex布局：也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局。
    flex布局不会产生浮动布局中脱标现象，布局网页更简单，更灵活。
4.flex布局-组成：
    设置方式：给父元素设置display，子元素可以自动挤压或拉伸
5.flex布局-主轴对齐方式：justify-content：flex-start/flex-end/center/space-between/space-around/space-evenly
6.flex布局-侧轴对齐方式：align-items：stratch/center/flex-start/flex-end
                    Align-self：同上
7.flex修改主轴方向：flex-direction：column
8.flex布局-弹性伸缩比：flex：数字
9.flex布局-换行：flex-wrap：wrap/nowrap
10.flex布局-行对齐方式：align-content：flex-start/flex-end/center/space-between/space-around/space-evenly
11.综合案例：抖音解决方案