HTML页面排版布局有五种方法：一、Flexbox用于一维对齐；二、Grid实现二维行列控制；三、浮动配合清除适用于旧项目或文本环绕；四、定位实现精确坐标控制；五、display属性调节元素显示模式。
如果您正在构建一个HTML页面，但发现内容杂乱无章、元素重叠或无法按预期对齐，则可能是由于缺乏有效的排版与布局控制。以下是实现HTML页面排版与布局设计的多种方法：
一、使用CSS Flexbox布局
Flexbox是一种一维布局模型，适用于在单个主轴（水平或垂直）上对齐和分布元素，特别适合导航栏、卡片组、表单控件等场景。
1、在HTML中为容器元素添加class属性，例如：class="container"。
2、在CSS中定义该类为flex容器：.container { display: flex; }。
立即学习“前端免费学习笔记（深入）”；
3、通过flex-direction设置主轴方向（row/column），用justify-content控制主轴对齐，用align-items控制交叉轴对齐。
二、使用CSS Grid布局
Grid是一种二维布局系统，可同时控制行与列，适用于复杂页面结构如仪表盘、杂志式布局、响应式网格画廊等。
1、为父容器设置display: grid启用网格布局。
2、使用grid-template-columns和grid-template-rows定义显式网格轨道尺寸。
3、为子元素指定grid-column与grid-row，精确控制其在网格中的位置。
三、使用浮动（float）配合清除（clear）
浮动曾是早期网页布局的核心技术，虽已被Flexbox和Grid取代，但在兼容旧项目或特定文本环绕场景中仍有应用价值。
1、对需要左对齐的块级元素设置float: left，右对齐则设为float: right。
2、在浮动元素之后的元素上添加clear: both，防止后续内容被浮动元素覆盖。
3、也可在父容器内部末尾插入空
四、使用定位（position）进行精确控制
定位允许脱离文档流，对单个元素进行绝对、相对或固定坐标控制，适用于弹窗、悬浮按钮、页脚固定等特殊排版需求。
1、将目标元素的position设为relative（相对自身原位置偏移）或absolute（相对于最近已定位祖先）。
2、使用top、right、bottom、left属性设定偏移量。
3、若需全屏覆盖或固定于视口，使用position: fixed并配合z-index确保层级正确。
五、使用传统块级与内联显示模式控制
通过调整元素的display属性，可改变其默认渲染行为，从而影响整体排版流，是基础但关键的布局调节手段。
1、将内联元素（如）设为display: block使其独占一行并支持宽高设置。
2、将块级元素（如
3、使用display: table及其相关值（table-cell、table-row）模拟表格布局，实现垂直居中等效果。
