写一个双飞翼布局

双飞翼布局是一种常用的三栏布局方式，其特点是中间栏宽度自适应，左右两栏宽度固定，而且不使用浮动。下面是一个简单的双飞翼布局示例：

HTML代码：

<div class="wrapper">
  <div class="header">Header</div>
  <div class="main">
    <div class="content">Main Content</div>
  </div>
  <div class="sidebar1">Sidebar 1</div>
  <div class="sidebar2">Sidebar 2</div>
  <div class="clear"></div>
  <div class="footer">Footer</div>
</div>

CSS代码：

.wrapper {
  margin: 0 auto;
  width: 960px;
  overflow: hidden;
}

.header {
  height: 100px;
  background-color: #ccc;
}

.main {
  float: left;
  width: 100%;
  background-color: #fff;
  margin-left: -220px;
  margin-right: -220px;
}

.content {
  margin-left: 220px;
  margin-right: 220px;
}

.sidebar1 {
  float: left;
  width: 220px;
  background-color: #eee;
  margin-left: -100%;
}

.sidebar2 {
  float: left;
  width: 220px;
  background-color: #eee;
  margin-left: -220px;
}

.clear {
  clear: both;
}

.footer {
  height: 100px;
  background-color: #ccc;
}

解析：

• .wrapper是容器元素，宽度为固定值，设置了 overflow: hidden 以清除浮动。
• .header是页头，高度为固定值，背景色为灰色。
• .main是主要内容区域，设置了 float: left 以使其在页面中左浮动，宽度为100%。由于左右两侧有固定宽度的侧栏，因此需要设置 margin-left 和 margin-right 为侧栏的宽度，以使内容区域自适应宽度。
• .content是主要内容的容器，设置了左右两侧的宽度为侧栏的宽度，以使内容居中。
• .sidebar1和.sidebar2是两侧的侧栏，都设置了 float: left 以使其在页面中左浮动，宽度为固定值，并且添加了负的外边距以使其与内容区域重叠。
• .clear是一个空的块级元素，添加了 clear: both 以清除浮动。
• .footer是页脚，高度为固定值，背景色为灰色