1. 引言&概述

网页布局的本质：

使用 CSS 盒子模型来进行调整和定位。

布局的常见方式：

标准流（普通流）

浮动

定位

今天的讲义中，我们先讲解标准流 和 浮动。

2. 基本布局：标准流

标准流布局：标签按照默认方式排列，是布局中最基本的方式。

我们前面学习的所有布局调整，全部都是标准流布局。

例如：

div 是标准 块级元素，独占一行，多个 div 从上到下顺序排列。

例如：

span 是标准 行内元素，从左到右依次排序，若一行的行内元素过多，多与的行内元素触碰到父元素边框会换行。

3. 常用布局：浮动

3.1 引入

通常我们有这样的布局需求：div 进行一行的顺序布局、或 div 进行一行的两端布局

除了可以使用我们之前学过的显示模式转换 display 进行调节，我们还可以使用 浮动 布局来完成以上效果。

3.2 概述及格式

浮动布局：让元素脱离标准流进行“漂浮”的布局方式，可以改变元素默认的排列方式。多用于让块元素横向排列的需求。

格式：

选择器{

float:属性值;

}

常用属性值：

none：元素不浮动（默认值）

left：元素向左浮动

right：元素向右浮动

下面我们使用多个课堂案例，来认识浮动。

3.3 浮动案例

3.3.1 准备代码

3.3.2 案例 1：左对齐顺序排列

示例 1：要求在一行上，左对齐：

注意：因为从上到下执行代码，红色方块是第一个向左浮动的，自然在最左边

3.3.3 案例 2：右对齐顺序排列

示例 2：要求在一行上，右对齐：

注意：因为从上到下执行代码，红色方块是第一个向右浮动的，自然在最右边

3.3.4 案例 3：两端对齐排列

示例 3：要求在一行上，进行如下两端对齐：

注意：因为从上到下执行代码，绿色方块是第一个向右浮动的，自然在最右边

3.3.5 课堂练习：两端对齐排列

准备代码：

要求的效果：

提示：

左浮动：先红后蓝

右浮动：先绿后黄

答案：

3.4 浮动特点及注意事项

1、相较于标准流元素，元素设置浮动，会对下方标准流产生影响，不影响上方标准流。

2、相邻浮动元素之间默认贴合（除非主动设置 margin），若浮动元素触碰到父元素边框，会自行换行。

3、任何元素均可浮动，设置浮动后，元素的特性与 行内块元素相似（宽度可设置、默认由内容决定、触碰父元素边缘自动换行）

3.5 浮动总结

浮动和标准流一般搭配使用：

步骤：1、标准流作父元素，用于排列垂直位置

2、浮动元素在标准流父元素内，用于排列水平位置