每日CSS一道题day01

内容：什么是双飞翼布局以及如何书写？

• 原理：左右固定宽高，利用定位、负定位距离，实现中间的宽度自适应

---

代码演示：

HTML：

 
头部
  

    

      
中
    
    
左
    
右
  
  
头部

这里引入头部和尾部是为了突出如何在具体内容插入一个双飞翼布局

---

CSS：

 /* 去除浏览器默认样式 */
    * {
      margin: 0;
      padding: 0;
    }

    .header,
    .footer {
      height: 200px;
      width: 100%;
      background-color: aqua;
    }

    /* 都添加定位 */
    .container div {
      float: left;
    }

    /* 清除浮动，否则尾部将会塌陷 */
    .container::after {