CSS常见的布局方式，前端开发有效连接

CSS提供了多种方式来进行页面布局，以下是一些常见的布局方式及其示例代码：

1. 浮动布局（Float）

.float-layout {
  float: left; /* 或者 right */
  width: 50%;
}

2. 标准文档流（Normal Flow）

.normal-flow-layout {
  width: 50%;
}

3. 绝对定位布局（Absolute Positioning）

.absolute-layout {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 300px;
}

4. 相对定位布局（Relative Positioning）

.relative-layout {
  position: relative;
  left: 10px;
  top: 10px;
  width: 50%;
}

5. 表格布局（Table）

.table-layout {
  display: table;
  width: 100%;
}
.table-cell {
  display: table-cell;
  width: 50%;
}

6. Flexbox布局

.flex-container {
  display: flex;
}
.flex-item {
  flex: 1; /* 或者指定比例 */
}

7. Grid布局

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
}
.grid-item {
  /* grid item styles */
}

每种布局都有其特点，可以根据具体需求选择合适的布局方式。在实际开发中，Flexbox 和 Grid 布局因其灵活性和完整的布局能力，使用最为广泛。