浮动和flex布局

浮动

浮动：让元素水平排列

属性名：float

属性值：left：左对齐    right：右对齐

会消除原有的标准流

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级就无法撑开父级高度

解决办法：清楚浮动（清除浮动带来的影响）

1.额外标签法

在父元素的内容的最后一个位置添加一个块级元素，设置CSS属性为clear：both

.clearfix {
    clear: both;
}

-- 使用方法

<div class="top">
    <div class="right"></div>
    <div class="left"></div>
    <div class="clearfix"></div>   -- 放在父级元素最下面
</div>

2.单伪元素法

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

-- 使用方法
<div class="top clearfix">    -- 放在父级元素class里面
    <div class="right"></div>
    <div class="left"></div>
</div>

3.双伪元素法（推荐）

        .clearfix::before,  -- before解决外边距塌陷问题
        .clearfix::after {  -- after清除浮动的影响
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

-- 使用方法
<div class="top clearfix">    -- 放在父级元素class里面
    <div class="right"></div>
    <div class="left"></div>
</div>

方法四：overflow

父元素上添加CSS属性overflow：：hidden   -- 超出父级范围的全部隐藏，但此处是消除浮动的影响

浮动总结

• 浮动属性float，left表示左浮动，right表示右浮动
• 特点如下：

1. 浮动后盒子顶对齐
2. 浮动后的盒子具有行内块的特点
3. 父级宽度不够，浮动的子级会换行
4. 浮动后的盒子脱离标准流，若未给父级元素设置高，那么将无法撑大盒子的范围

2、flex布局

flex布局也叫弹性布局，是浏览器提倡的布局模型。非常适合结构化布局，提供了强大的空间分布和对齐能力。

flex模型不会产生浮动布局当中的脱标现象，布局网页变得更加简单、更灵活、

1.flex-组成

设置方法：给父元素设置display:flex，子元素可以自动挤压或拉伸

组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴 / 交叉轴：默认在垂直方向

2.主轴和侧轴的对齐方式

2.1主轴对齐方式 

属性名：justify-content

 2.2在侧轴的对齐方式

属性名：

• align-items：当前弹性容器内所有的弹性盒子的侧轴对齐方式（哥弹性容器设置）
• align-self：单独给控制的某个弹性盒子的轴对齐方式（给弹性盒子设置）

2.3修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

 最常用的是column使元素垂直排列，主轴变到垂直方向，那么侧轴就是水平方向

相应的对齐方式也会变化。

2.4弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数

2.5弹性盒子换行

弹性盒子可以制动挤压或者压缩，默认请教下，所有弹性盒子都在一行显示

属性名：flex-warp

属性值：

• wrap： 换行
• nowarp： 不换行（默认）

2.7行对齐方式

与主轴对齐方式相比只有属性名不同

属性名：align-content

属性值：

此属性对单行盒子是不生效的

例如设置属性为align-content：center

依旧是在行的顶部