标准流.浮动.flex布局

标准流:

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

(div标签是块元素.默认是独占一行的,span标签是行内块元素,可以一行显示多个)

浮动:

作用:让块元素水平排列.

属性名:float

属性值:left-左对齐;right-右对齐.

特点:浮动后的盒子顶对齐;

        浮动后的盒子具备行内块的特点(一行显示多个,可以设置宽高);

        浮动后的盒子脱标,不占标准流的位置.

场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)

解决方法:清除浮动(清除浮动带来的影响)

方法一:额外标签法

在父元素内容的最后的添加一个块级元素,设置css属性 clear:both;

方法二:单伪元素法

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

 方法三:双伪元素法(推荐使用)

        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

方法四:overflow

父元素添加css属性overflow:hidden;

拓展:浮动的本质作用是实现图文混排的效果,一般在新闻页面出现(图片在左上角,文字铺满整个盒子)

Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

Flex布局简而言之就是把几个块元素(独占一行)可以放在同一排(一行显示多个)

设置方式:给父元素设置display:flex,子元素可以自动挤压或者拉伸.

组成部分:

       弹性容器,

       弹性盒子,

       主轴(默认水平方向)

       侧轴(默认垂直方向)       

  

( ps:     align-content属性是配合flex-wrap使用的,如果没有设置flex-wrap属性,使用align-content也不会生效)

主轴对齐方式

属性名:justify-content

侧轴对齐方式 

属性名:align-items(单行侧轴) ----给弹性容器设置

           align-self----给弹性盒子设置

 修改主轴方向

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

 属性名:flex-direction;

 弹性伸缩比:

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

属性名:flex

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

弹性盒子换行:

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示.

属性名:flex-wrap;

属性值:wrap:换行

            nowrap:不换行(默认)

多行对齐方式(需要和flex-wrap配合使用):

属性名:align-content

属性值: