1. 浮动布局 (Float)
应用场景：浮动布局常用于实现简单的多列布局，如图片文字环绕、简单的栅格布局等。
常用属性：
float: 定义元素的浮动方向，常用值为left,right,none。clear: 清除浮动，常用于父容器以避免塌陷。常用值为left,right,both。overflow: 用来避免浮动元素影响父元素高度，常用值为hidden。
代码示例：
<div style="width: 100%; overflow: hidden;">
<div style="float: left; width: 50%; background-color: lightblue;">
左浮动
</div>
<div style="float: left; width: 50%; background-color: lightgreen;">
右浮动
</div>
</div>
注意：使用浮动时，要注意清除浮动（如使用clearfix类），否则会导致父容器高度塌陷。
2. 定位布局 (Position)
应用场景：用于实现精确定位，尤其是当需要让元素脱离正常文档流，并定位到页面的特定位置时。
常见定位类型：
static（默认值）：普通文档流relative：相对于元素原本位置的偏移absolute：相对于最近的定位父元素（relative或absolute）偏移fixed：相对于浏览器窗口固定位置sticky：结合普通流和固定定位，滚动时固定某个位置top,right,bottom,left: 设置元素的位置偏移z-index: 设置堆叠顺序，用于管理元素的前后关系
代码示例：
<!-- 使用相对定位 -->
<div style="position: relative; top: 20px; left: 30px;">
这是相对定位
</div>
<!-- 使用绝对定位 -->
<div style="position: absolute; top: 50px; left: 100px;">
这是绝对定位
</div>
<!-- 使用固定定位 -->
<div style="position: fixed; bottom: 0; right: 0; background-color: lightblue;">
这是固定定位
</div>
<!-- 使用粘性定位 -->
<div style="position: sticky; top: 0; background-color: lightcoral;">
这是粘性定位
</div>
3. Flexbox 布局
应用场景：Flexbox是现代布局中非常强大且灵活的工具，适用于一维布局（横向或纵向）。它特别适合响应式设计，能够灵活地分配空间，保持项目对齐。
常用属性：
display: flex: 启用弹性盒子布局。flex-direction: 定义主轴方向，常用值为row（默认值，水平方向），column（垂直方向）。justify-content: 控制主轴上的对齐方式，常用值有flex-start（左对齐），center（居中对齐），space-between（两端对齐），space-around（均匀分布）。align-items: 控制交叉轴上的对齐方式，常用值有flex-start（上对齐），center（居中对齐），stretch（拉伸填充）。flex-grow: 控制项目如何扩展以填充剩余空间（1表示占据多余空间）。flex-shrink: 控制元素在空间不足时的收缩比例。flex-basis: 设置项目的基础尺寸。flex-wrap: 是否允许换行，常用值有nowrap（不换行），wrap（换行）。
代码示例：
<!-- 基本Flexbox布局 -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="background-color: lightblue; width: 100px; height: 100px;">Item 1</div>
<div style="background-color: lightgreen; width: 100px; height: 100px;">Item 2</div>
<div style="background-color: lightcoral; width: 100px; height: 100px;">Item 3</div>
</div>
<!-- 垂直居中 -->
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div style="background-color: lightblue; width: 200px; height: 100px;">垂直居中</div>
</div>
4. Grid 布局
应用场景：Grid布局是二维布局，可以同时控制行和列，非常适合用于复杂的网页设计，尤其是表格状、网格状的布局。
常用属性：
display: grid: 启用网格布局。grid-template-columns: 定义列的数量和宽度。grid-template-rows: 定义行的数量和高度。grid-gap: 定义网格项目之间的间隔。grid-column,grid-row: 定义项目跨越的列数或行数。
代码示例：
<!-- 使用Grid布局 -->
<div style="display: grid; grid-template-columns: 1fr 2fr; grid-gap: 20px;">
<div style="background-color: lightblue; height: 100px;">Item 1</div>
<div style="background-color: lightgreen; height: 100px;">Item 2</div>
<div style="background-color: lightcoral; height: 100px;">Item 3</div>
</div>
<!-- 创建更复杂的Grid -->
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px;">
<div style="grid-column: 1 / 3; background-color: lightblue;">Item 1</div>
<div style="background-color: lightgreen;">Item 2</div>
<div style="background-color: lightcoral;">Item 3</div>
</div>
5. 多列布局 (Columns)
应用场景：当需要将文本或元素分成多列时（类似报纸布局）。
常用属性：
column-count: 设置列数。column-gap: 设置列之间的间距。column-width: 设置列宽度（可与column-count共同使用）。
代码示例：
<div style="column-count: 3; column-gap: 20px;">
<p>这是多列布局</p>
<p>更多内容...</p>
<p>更多内容...</p>
</div>
6. 表格布局 (Table Layout)
应用场景：用于展示表格数据，但表格也可以作为一种布局方法，尤其在需要强制对齐行和列时。
常用属性：
display: table: 将元素转换为表格。display: table-row: 定义为表格行。display: table-cell: 定义为表格单元格。
代码示例：
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="border: 1px solid #000; padding: 10px;">Column 1</td>
<td style="border: 1px solid #000; padding: 10px;">Column 2</td>
<td style="border: 1px solid #000; padding: 10px;">Column 3</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 10px;">Row 2, Column 1</td>
<td style="border: 1px solid #000; padding: 10px;">Row 2, Column 2</td>
<td style="border: 1px solid #000; padding: 10px;">Row 2, Column 3</td>
</tr>
</table>
7. 响应式布局技巧
应用场景：当需要根据不同屏幕大小调整布局时，可以使用媒体查询来控制布局。
常用属性：
@media: 用于设置不同设备下的样式。max-width,min-width: 用于限定媒体查询的设备宽度范围。
代码示例：
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1 1 200px; background-color: lightblue; padding: 10px;">Box 1</div>
<div style="flex: 1 1 200px; background-color: lightgreen; padding: 10px;">Box 2</div>
<div style="flex: 1 1 200px; background-color: lightcoral; padding: 10px;">Box 3</div>
</div>
<style>
@media (max-width: 600px) {
div {
flex: 1 1 100%; /* 在小屏幕上，使每个框占据整个宽度 */
}
}
</style>
