[分享]css双飞翼布局能用定位做吗

CSS双飞翼布局是一种流行的网页布局技术，它可以实现页面的多栏布局，而且可以让内容区域具有自适应宽度的特性。这种布局技术通常使用浮动和负边距来实现，但是有些开发者也尝试使用定位来达到同样的效果。那么，...

CSS双飞翼布局是一种流行的网页布局技术，它可以实现页面的多栏布局，而且可以让内容区域具有自适应宽度的特性。这种布局技术通常使用浮动和负边距来实现，但是有些开发者也尝试使用定位来达到同样的效果。那么，CSS双飞翼布局能用定位做吗？

/* 双飞翼布局代码 */
.container {
  overflow: hidden;
}

.left {
  float: left;
  width: 20%;
  margin-left: -100%; /* 可能会出现滚动条 */
}

.right {
  float: left;
  width: 20%;
  margin-left: -20%; /* 靠左边距离为20% */
}

.middle {
  float: left;
  width: 60%;
}

/* 创建三个div，并分别给它们设置类名 */
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
</div> 

在CSS双飞翼布局中，我们可以看到三个块元素left、right、middle，它们分别按照20%、20%、60%的宽度布局，这些元素都被浮动到了左侧，并且通过负margin消除了浮动元素可能会留下的空白。这个布局会让middle元素拥有自适应的宽度，而left和right元素则会被挤压到了页面的两端。

对于使用定位实现CSS双飞翼布局，其实是不太可行的。因为这种方法面临一个困境：通过设置定位属性（例如 position:absolute），元素的位置会脱离文档流，从而影响其他元素的布局。而影响最大的就是中间的middle元素，如果无法正确地约束和定位它，整个布局就很难实现。

总之，在实现CSS双飞翼布局时，我们依然需要使用浮动和负margin来实现，而不要采用定位的方式。这就是为什么说CSS双飞翼布局不能使用定位实现。