作为页眉区域，包含网站标题或Logo。
2、紧随其后使用
3、用包裹页面核心内容，内部可嵌套多个表示独立文章单元。
4、侧边栏内容放入，页脚信息统一置于
二、Flexbox弹性布局
Flexbox专为一维布局设计，适用于导航栏、卡片排列、居中对齐等场景。通过设置容器display: flex，控制子元素的排列方向、换行、对齐方式。
1、给父容器添加CSS属性display: flex，并设定flex-direction为row或column。
2、使用justify-content控制主轴对齐方式，如space-between可使子项两端对齐并均匀分布间隙。
3、使用align-items控制交叉轴对齐，如center可实现垂直居中。
4、对单个子元素应用align-self可覆盖容器级对齐设置，此操作优先级高于容器align-items。
三、Grid网格布局
CSS Grid提供二维布局能力，允许同时定义行与列，适合复杂版面如仪表盘、图文混排、响应式相册等。容器通过grid-template-rows和grid-template-columns划分轨道。
1、将父容器display设为grid，并用grid-template-areas定义命名区域，如"header header" "nav main" "footer footer"。
2、为每个子元素设置grid-area属性，匹配模板中对应名称，例如header { grid-area: header; }。
3、使用gap属性统一设置网格间距，gap值不可为负数。
4、通过grid-column和grid-row指定某元素跨越多列或多行，如grid-column: 1 / -1表示横跨全部列。
四、浮动布局（兼容旧项目）
尽管Flexbox和Grid已成主流，但部分遗留系统仍依赖float实现多栏排版。浮动会使元素脱离文档流，需清除浮动以避免父容器高度塌陷。
1、对需要并排显示的块级元素设置float: left或float: right。
2、在浮动元素的父容器末尾添加空
并设clear: both，或直接对父容器应用overflow: hidden触发BFC。
3、为浮动元素显式声明width，未设宽度的浮动块级元素将收缩至内容宽度。
4、避免对行内元素直接使用float，应先将其display设为block或inline-block。
五、响应式流体布局
流体布局基于相对单位（如%、rem、vw/vh）构建，结合媒体查询适配不同视口尺寸。核心是容器宽度设为百分比，字体与间距采用rem单位，根字体大小随视口动态调整。
1、设置html { font-size: 100%; }，并在媒体查询中按断点修改该值，如@media (max-width: 768px) { html { font-size: 14px; } }。
2、所有宽度相关属性使用%，高度慎用%，避免内容溢出时高度失效。
3、图片添加max-width: 100%和height: auto，防止超宽图片撑破容器。
4、使用min-width和max-width限制容器最小与最大宽度，确保小屏下不缩太小、大屏下不无限延展。
适用于一维弹性排列；Grid支持二维复杂布局；浮动用于旧项目多栏排版；流体布局结合相对单位与媒体查询实现响应式适配。
适用于一维弹性排列；Grid支持二维复杂布局；浮动用于旧项目多栏排版；流体布局结合相对单位与媒体查询实现响应式适配。