HTML 布局的核心是通过 HTML 标签搭建页面结构，配合 CSS 控制元素的位置和大小，实现符合预期的页面排版。
例如，传统管理系统后台通常包含三个部分，分别是标题栏，菜单栏和工作区域，如下图：
或者，在底部再添加一栏版本信息栏，如下图：
（1）HTML 负责搭建结构骨架
使用前面介绍的块级和行级元素搭建页面的骨架：
块级元素（独占一行，可设置宽高）：<div>（通用无语义）、<header>（页头）、<nav>（导航栏）、<main>（页面核心内容）、<section>（内容区块）、<aside>（侧边栏）、<footer>（页脚）
行内 / 行内块元素（不独占一行，行内元素不可设置宽高）：<span>（通用行内）、<img>（行内块）、<a>（行内）
注意：当下搭建页面推荐优先使用具有意义的布局块，如导航栏用 <nav>、主体用 <main>等。
（2）CSS 负责控制布局样式
HTML 本身仅能实现最简单的流式布局，复杂布局全靠 CSS 支撑，布局的核心是CSS 对元素盒模型和定位方式的控制。
关于CSS相关的知识，将在 CSS 教程中进行详细介绍。
这是最早期的布局方式，仅依赖 HTML 块级 / 行内元素的默认特性，配合 CSS 的width、height、margin、padding实现简单排版。
核心特点：
块级元素自上而下垂直排列，行内元素自左向右水平排列（流式布局，也叫「正常文档流」）
仅能实现简单的上下分段、左右少量元素排列，无法实现复杂的多列布局
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
/* 基础样式重置，消除浏览器默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
}
main {
width: 1200px;
height: 500px;
background-color: #f5f5f5;
margin: 20px auto; /* 水平居中 */
line-height: 500px;
text-align: center;
}
footer {
width: 100%;
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<header>这是页头（网站标题/导航）</header>
<main>这是核心内容区（文章/商品）</main>
<footer>这是页脚（版权/联系方式）</footer>
</body>
</html>运行示例，效果如下图：
从上图可知，布局是从上而下。这种布局存在一个缺陷，即无法实现「左右两列 / 三列」布局（比如侧边栏 + 主内容）。
为了解决不能多列问题，有两种办法：
（1）采用表格进行布局。
（2）使用浮动布局，利用 CSS 的 Float 实现。
通过 CSS 的 float: left/right 让块级元素脱离正常文档流，实现水平排列，配合 clear 清除浮动影响。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
/* 基础样式重置，消除浏览器默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 标题栏 */
header {
width: 100%;
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
}
main {
width: 1200px;
height: 500px;
background-color: #f5f5f5;
margin: 20px auto; /* 水平居中 */
line-height: 500px;
text-align: center;
/* 清除浮动：解决子元素浮动导致父元素高度塌陷 */
overflow: hidden;
}
.aside {
width: 280px;
height: 500px;
background-color: #e9e9e9;
float: left; /* 左浮动 */
text-align: center;
line-height: 500px;
}
.content {
width: 880px;
height: 500px;
background-color: #f5f5f5;
float: right; /* 右浮动 */
text-align: center;
line-height: 500px;
margin-left: 40px;
}
/* 页脚 */
footer {
width: 100%;
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<header>这是页头（网站标题/导航）</header>
<main>
<div class="aside">侧边栏（分类/广告）</div>
<div class="content">主内容区（文章详情）</div>
</main>
<footer>这是页脚（版权/联系方式）</footer>
</body>
</html>运行示例，效果如下图：
虽然浮动布局解决了原始简单布局无法实现左右两列/三列的问题，但是也存在如下问题：
容易出现高度塌陷（即父元素无法完全包裹浮动的子元素，子元素会溢出父元素所示的区域），这个需要额外处理（如使用 overflow: hidden / 清除浮动伪类）
布局不够灵活，无法快速实现元素居中、等高布局等需求
复杂布局下（比如三列 + 响应式），代码冗余且容易出问题
为了解决做这些问题，出现了弹性盒（Flex）布局。
弹性盒 Flex 布局是 CSS3 中引入的新特性。
通过给父元素设置 display: flex，将其变为「弹性容器」，子元素变为「弹性项目」，通过弹性容器的属性控制子元素的排列方式、间距、对齐方式等，是目前移动端和 PC 端布局的首选（关于 CSS3 相关知识请学习 CSS3 教程）。
注意：这里不单独介绍 Flex 相关的属性，这部分内容将在 CSS3 教程中进行详细介绍。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
/* 基础样式重置，消除浏览器默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 标题栏 */
header {
width: 100%;
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
}
main {
width: 1200px;
height: 500px;
background-color: #f5f5f5;
margin: 20px auto; /* 水平居中 */
line-height: 500px;
text-align: center;
display: flex; /* 开启Flex布局 */
gap: 40px; /* 项目之间的间距（替代margin，更简洁） */
}
.aside {
width: 280px;
background-color: #e9e9e9;
text-align: center;
line-height: 500px;
}
.content {
flex: 1; /* 占满容器剩余所有空间（自适应宽度） */
background-color: #f5f5f5;
text-align: center;
line-height: 500px;
}
/* 页脚 */
footer {
width: 100%;
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<header>这是页头（网站标题/导航）</header>
<main>
<div class="aside">侧边栏（固定280px）</div>
<div class="content">主内容（自适应剩余宽度）</div>
</main>
<footer>这是页脚（版权/联系方式）</footer>
</body>
</html>运行示例，效果如下图：
了解上面几种布局已经可以解决日常大部分布局了，更多布局将在 CSS教程和 CSS3 教程中详细介绍。
关于更多HTML相关知识请学习后续教程……
川公网安备51010802032098