【CSS3】04-标准流 + 浮动 + flex布局

本文介绍浮动与flex布局。

[1. 标准流](#1. 标准流)

[2. 浮动](#2. 浮动)

[2.1 基本使用](#2.1 基本使用)

特点

脱标

[2.2 清除浮动](#2.2 清除浮动)

[2.2.1 额外标签法](#2.2.1 额外标签法)

[2.2.2 单伪元素法](#2.2.2 单伪元素法)

[2.2.3 双伪元素法(推荐)](#2.2.3 双伪元素法(推荐))

[2.2.4 overflow(最简单)](#2.2.4 overflow(最简单))

[3. flex布局](#3. flex布局)

[3.1 组成](#3.1 组成)

[3.2 主轴与侧轴对齐方式](#3.2 主轴与侧轴对齐方式)

[3.2.1 主轴](#3.2.1 主轴)

[3.2.2 侧轴](#3.2.2 侧轴)

[3.3 修改主轴方向](#3.3 修改主轴方向)

[3.4 弹性伸缩比](#3.4 弹性伸缩比)

[3.5 弹性换行与行对齐](#3.5 弹性换行与行对齐)

[3.5.1 弹性盒子换行](#3.5.1 弹性盒子换行)

[3.5.2 行对齐方式](#3.5.2 行对齐方式)

1. 标准流

也叫文档流，指的是标签在页面中默认的排布规则

例如：块元素独占一行，行内元素可以一行显示多个

2. 浮动

让块级元素水平排列

2.1 基本使用

属性名：float

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

两个标签都加上左浮动：都靠左

第二个改为右浮动：一左一右

特点

顶对齐，具备行内块的显示模式

脱标

给标签加上浮动，本身属于让其脱离标准流的控制

如果一个有浮动，另一个没有浮动，效果如下：

就会出现上面的叠加效果，因为浮动后的，不是标准流了，所以浏览器不会认为它在占用空间，下面没有加浮动的标签顺其自然的上移和one标签重叠。

所以最好两个都要浮动。

2.2 清除浮动

浮动元素会脱标，如果浮动的父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

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

先看正常的：

现在注释掉top的高度

因为 top.div 里的两个盒子是浮动的，属于脱标，浏览器会认为其不存在，所以出现上面的情况。

2.2.1 额外标签法

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

2.2.2 单伪元素法

在父元素内容的最后添加一个块级元素

可以直接使用如下代码：

复制代码

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

2.2.3 双伪元素法(推荐)

复制代码

        /* 双伪元素 */
        /* before 解决外边距塌陷问题 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: block;
        }

        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">      
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>