1.浮动 (Float)

• 应用场景: 浮动布局常用于实现文字环绕图片、水平排列盒子等效果。
• 实践: 使用float属性将元素设置为浮动，可以是left或right。

.float-left {
  float: left;
}
.float-right {
  float: right;
}

清除浮动是必须的，常见的方式是使用伪元素。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2.定位 (Position)

• 应用场景: 定位布局常用于制作导航栏、悬浮窗口、弹出对话框等效果。
• 实践: 使用position属性设置元素的定位方式，如relative、absolute、fixed。

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

3.弹性盒子布局 (Flexbox)

• 应用场景: 弹性盒子布局适用于各种复杂的布局需求，特别适合于实现自适应布局。
• 实践: 使用display: flex将容器设置为弹性盒子，然后使用flex属性调整子元素的布局。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}
.grid-item {
  grid-column: span 1;
  grid-row: span 1;
}

4.网格布局 (Grid)

• 应用场景: 网格布局适用于创建复杂的二维布局，如响应式页面、瀑布流布局等。
• 实践: 使用display: grid将容器设置为网格，然后使用grid-template-columns和grid-template-rows定义网格结构。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}
.grid-item {
  grid-column: span 1;
  grid-row: span 1;
}

以上是一些常见的CSS布局技巧和它们的应用场景及实践示例。根据项目需求灵活运用这些布局技巧，可以高效地实现各种复杂的页面效果。