CSS day6 浮动与flex

标准流：也叫文档流，指的是标签在页面中默认的排布规则，例：块元素独占一行，行内元素可以一行显示多个。

浮动：让块级标签在一行水平排列。
属性名：float
属性值：left：左对齐，right：右浮动
特点：顶对齐，具备行内块显示模式特点，浮动的盒子会脱标。

浮动-产品区域布局：如果父级宽度不够，浮动的盒子会掉下来。

清除浮动：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度，可能会导致页面布局混乱。
1.额外标签法：在父级元素内容的最后添加一个块级元素（独占一行，div或者p），设置CSS属性，clear：both（清除左右浮动脱标）。（了解一下）
        .clearfix {
            clear: both;
        }
<div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
2.单伪元素法：在父级元素内容的最后添加一个块级元素
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
 <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
3.双伪元素法：推荐直接CV，跟清楚默认演示放一起
.clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
<div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
4.overflow，父元素添加CSS属性overflow：hidden

Flex布局：弹性布局，浏览器推荐的布局，非常适合结构化布局，提供了强大的空间分布和对齐能力，flex不会产生脱标，布局网页更简单灵活。

Flex-组成：（df）
给父元素设置display：flex，子元素是可以自动挤压或拉伸
组成：弹性容器，弹性盒子，主轴：默认在水平方向，侧轴/交叉轴：默认在垂直方向。
弹性盒子沿着主轴方向排列

主轴对齐方式：justify-content: ;（jc）
1.flex-start从起点开排
2.flex-end从终点开排
3.center沿主轴居中（居中）
4.space-between沿主轴均匀，空白均分弹性盒子之间，弹性盒子之间的间距相等，父级剩余的尺寸分配成间距
5.space-around沿主轴均匀，空白均分弹性盒子两侧，n盒子nn盒子nn盒子n
6.space-evenly沿主轴均匀，弹性盒子与容器之间间距相等。n盒子n盒子n盒子n

侧轴对齐方式：
align-items: ;加给所有弹性盒子，有display：flex。
align-self：单独控制某个弹性盒子。
属性：
stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没设置侧轴方向尺寸则默认拉伸）
center：弹性盒子沿侧轴居中排序
flex-start：从起点以此排序
flex-end：从终点以此排序

修改主轴方向：在图文时候常用，主轴默认在水平，侧轴默认在垂直，修改后主轴垂直，侧轴水平flex-direction: ;
属性值：
row：水平方向，从左到右
（主要）column：垂直方向，从上向下
row-reverse：水平方向，从右向左
column-reverse：垂直方向，从下向上

弹性伸缩比：flex，控制弹性盒子的主轴方向的尺寸
属性值：整数数字，表示占用父级剩余尺寸的份数

弹性盒子换行：弹性盒子自动挤压拉伸，所以默认会在一行显示，
flex-wrap：wrap（换），nowrap（不换）

行对齐方式：align-content：
对单行弹性盒子不生效，所以需要对弹性盒子换行。
1.flex-start从起点开排
2.flex-end从终点开排
3.center沿主轴居中（居中）
4.space-between沿主轴均匀，空白均分弹性盒子之间，弹性盒子之间的间距相等，父级剩余的尺寸分配成间距
5.space-around沿主轴均匀，空白均分弹性盒子两侧，n盒子nn盒子nn盒子n
6.space-evenly沿主轴均匀，弹性盒子与容器之间间距相等。n盒子n盒子n盒子n