css双飞翼模型

CSS双飞翼布局是一种用CSS实现的三列布局方式，其中左右两栏固定宽度，中间的栏宽度自适应，能够很好地适应不同屏幕尺寸。双飞翼布局的实现涉及到CSS的盒模型、浮动、绝对定位等知识点。下面我们就来一起学习一下如何实现CSS双飞翼模型。

  
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
    }
    
    .left {
      width: 200px;
      float: left;
    }
    
    .right {
      width: 200px;
      float: right;
    }
    
    .content {
      margin: 0 220px; /* 左右两栏宽度200px + 20px间距 */
      height: 100%;
      background-color: #fff;
    }
    
    .inner {
      padding: 20px;
    }
    
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
  

在上面的代码中，我们使用了一个容器元素`.container`来包裹整个布局。左右两栏使用`float`属性进行浮动，中间的栏使用`margin`属性设置宽度，使用`padding`属性设置内部内容。

还需要注意的是，我们在容器元素中使用了`position:relative`属性，同时还添加了一个清除浮动的伪元素`.clearfix:after`来防止浮动元素溢出。

通过以上代码，我们就成功地实现了CSS双飞翼布局，同时实现了自适应页面布局的效果。