下面详细介绍CSS布局模型，包括流动布局（也称为正常文档流）、浮动布局、定位布局、多列流动布局和弹性盒布局，并提供实际的例子来说明它们的使用。这些布局模型是构建现代Web界面的基础。

1 流动布局

基本特点：

• 在流动布局中，块级元素按照它们在HTML中的顺序自上而下排列，而内联元素则在这些块级元素内从左到右流动。
• 块级元素通常会占据可用的全部容器宽度，而内联元素只占据它们需要的空间。

示例：

<div>第一个块级元素</div><div>  第二个块级元素包含文本和<span style="color: red;">内联元素</span>。</div>

在这个例子中，两个div作为块级元素自上而下排列，span作为内联元素在第二个div中显示，并且可以应用样式改变其外观。

2 浮动布局

基本特点：

• 通过设置float属性为left或right，可以使元素脱离正常流并向左或向右浮动。
• 浮动元素之后的元素将围绕它排列，除非被清除浮动。

示例：

<div style="float: left; width: 50%;">左侧内容</div><div style="float: right; width: 50%;">右侧内容</div><div style="clear: both;">底部内容</div>

在这个布局中，两个div分别向左和向右浮动，占据各自50%的宽度，第三个div通过clear: both;确保它在浮动元素下方显示。

3 定位布局

基本特点：

• 定位布局允许元素脱离正常文档流，并可以通过top, bottom, left, right属性在页面上精确放置。
• 常见的定位类型包括relative, absolute, fixed, 和sticky。

示例：

<div style="position: relative;">  <div style="position: absolute; top: 10px; left: 10px;">绝对定位元素</div></div>

这里的内部div被绝对定位在其第一个相对定位的父容器内的top: 10px和left: 10px位置。

4 多列流动布局

基本特点：

• 允许将文本内容自动分布到多列中，类似于报纸的布局。
• 可以通过column-count和column-gap等属性控制列数和列间隔。

示例：

<div style="column-count: 3; column-gap: 20px;">  这是一个多列布局的例子，内容将自动分布到三列中。</div>

在这个例子中，文本被平均分布到三列中，每列之间有20px的间隔。

5 弹性盒布局

基本特点：

• 弹性盒模型提供了一种更加高效的方式来分配、对齐和调整网格布局中项目的大小。
• 它非常适合于那些容器大小未知或动态变化的布局需求。

示例：

<div style="display: flex;">  <div style="flex: 1;">第一项</div>  <div style="flex: 2;">第二项</div></div>

在这个布局中，父div设置为弹性容器，内部的两个div根据flex属性的比例分配空间。

6 网格布局

网格布局（Grid Layout）是一个强大的二维布局系统，允许我们以行和列的形式对元素进行布局控制。

示例：

<div style="display: grid; grid-template-columns: auto auto auto;">  <div>格子1</div>  <div>格子2</div>  <div>格子3</div></div>

这个网格布局创建了三列，每个div自动分配到一列中。

参考书籍 《CSS3+DIV网页样式与布局从入门到精通》