两栏、三栏布局怎么实现？圣杯布局和双飞翼布局是什么？

/* 方案一：float + BFC */
.aside { float: left; width: 200px; }
.main { display: flow-root; } /* 创建 BFC，不与浮动元素重叠，宽度自动占满剩余 */

/* 方案二：flex */
.wrap { display: flex; }
.aside { width: 200px; flex: none; }
.main { flex: 1; min-width: 0; }

/* 方案三：grid */
.wrap { display: grid; grid-template-columns: 200px 1fr; }

/* HTML 顺序是 main、left、right */
.wrap { display: flex; }
.main { flex: 1; min-width: 0; }
.left { width: 200px; order: -1; } /* 视觉上排到最左边 */
.right { width: 150px; }

/* 或者 grid：用 grid-column 指定位置，和 HTML 顺序无关 */
.wrap { display: grid; grid-template-columns: 200px 1fr 150px; }
.main { grid-column: 2; grid-row: 1; }
.left { grid-column: 1; grid-row: 1; }
/* .right 不写位置：自动放置会跳过已被占用的格子，落到第 1 行第 3 列 */

.container { padding: 0 150px 0 200px; } /* 两侧留出左右栏的位置 */
.container > div { float: left; }
.main { width: 100%; }
.left {
  width: 200px;
  margin-left: -100%; /* 拉回到上一行，和 main 左边对齐 */
  position: relative;
  left: -200px; /* 再挪进容器左侧的 padding */
}
.right {
  width: 150px;
  margin-right: -150px; /* 占位宽度变 0，挤上第一行，显示在右侧 padding 里 */
}

<div class="main"><div class="main-inner">内容</div></div>
<div class="left"></div>
<div class="right"></div>

.main, .left, .right { float: left; }
.main { width: 100%; }
.main-inner { margin: 0 150px 0 200px; } /* 内层留出两侧的位置 */
.left { width: 200px; margin-left: -100%; }
.right { width: 150px; margin-left: -150px; }

/* flex 写法 */
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
main { flex: 1; }

/* grid 写法：header、main、footer 三行 */
body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; margin: 0; }