css布局-双飞翼布局，相对定位和浮动

1.双飞翼布局

双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。

双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度。

2.实现

2.1 代码实现

<template>
  <div>
    <div class="g-container">
      <div class="g-middle">
        <div class="g-middle-inner">
          <!-- 中间区域的内容 -->
          <p>middle-inner</p>
        </div>
      </div>
      <div class="g-left">
        <!-- 左侧区域的内容 -->
        <p>left</p>
      </div>
      <div class="g-right">
        <!-- 右侧区域的内容 -->
        <p>right</p>
      </div>
    </div>
  </div>

</template>
<style lang="scss" scoped>
.g-container {
  position: relative;
  height: 100vh;
  min-width: 400px;

  &>div {
    height: 100vh;
    float: left;
    text-align: center;
    color: #fff;
    line-height: 100vh;
    font-size: 3vw;
  }

  .g-middle {
    position: relative;
    width: 100%;
    background: #cc6630;

    .g-middle-inner {
      margin: 0 300px 0 200px;
    }
  }

  .g-left {
    position: relative;
    width: 200px;
    background: #ffcc00;
    margin-left: -100%;
  }

  .g-right {
    position: relative;
    width: 300px;
    background: pink;
    margin-left: -300px;
  }
}
</style>

实现的效果

关键点
双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度

双飞翼布局的关键点父元素不需要设置 padding
双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的

2.2一些问题

如果去掉左右的margin-left

相当于每个都是浮动，这个能理解，但是为什么基本上每个div(除了中间的子容器)都会有个position: relative呢，有点困惑。。。

3.自我认知

left和right的position: relative我可以理解成，left和right的div里面可能会有多个子div，position: relative只是为了给子div的定位先做一个拓展，毕竟这个布局也没有flex布局。所以，如果只是演示这个布局，那么left和right的position: relative是可以完全去掉的。
最外层的div的position: relative，左中右的顺序布局已经确认了的，顶多就是把整个布局相对于原来的空间偏移些位置。
但是问题又来了，既然上面的几个div的position: relative可要可不要，那我把它们的position: relative去掉，只留中间的一个div。结果是：

只看得到一个中间的div了。
div的相对定位不会对浮动元素产生影响

3.1 div的相对定位不会对浮动元素产生影响

   <div class="container">
      <div class="relative">相对定位元素</div>
      <div class="float">浮动元素</div>
    </div>
    .relative {
  position: relative;
  top: 20px; /* 向上偏移 */
  left: 20px; /* 向左偏移 */
}

.float {
  float: left;
}

我们再把relative的定位 top和left去掉

可以发现，相对定位的位置变化不会对浮动元素产生影响。但是如果把浮动的元素移动到相对定位的原来空间上呢。

.float {
    float: left;
    margin-left: -100%;
}

这时无论相对定位的位置变化，虽然也不会影响浮动元素，但是浮动元素是不会显示出来的。

除非浮动元素的渲染顺序在前

<div  class="container">
<div  class="float">浮动元素</div>
<div  class="relative">相对定位元素</div>
</div>

3.2问题总结

所以原来的那个问题就是左右div是浮动，中间的既有浮动也有相对定位，这个的话
当一个 div 同时拥有 position: relative 和 float: left 时，它的行为会受到 两者叠加 的影响，但最终 以 float: left 的效果为主。

具体来说：

• position: relative：
  • 会将该元素设置为相对定位，使其成为定位参考点。这意味着你可以使用 top、right、bottom、left 属性来相对于其正常位置进行微调。
• float: left：
  • 会将该元素浮动到左侧，使其与文本内容并排显示。它会影响元素的定位，使其脱离标准文档流，并根据 float: left 的特性进行布局。

最终效果：

• 该 div 会被浮动到左侧，就像没有 position: relative 一样。
• 同时，由于 position: relative，你可以使用 top、right、bottom、left 属性对其进行微调，例如：

<div style="position: relative; float: left; top: 10px; left: 20px;">
  内容
</div>

在这个例子中，虽然 div 会被浮动到左侧，但它的位置会比原本位置高 10 像素，向右移动 20 像素。

总结：

float 属性会影响元素的定位和布局，而 position: relative 则让你能够对元素进行微调。当两者同时存在时，float 的效果会起主导作用，而 position: relative 则会让你可以对浮动元素进行进一步的调整。
出现这个问题感觉可以理解成middle既有相对定位的一些特性，像上面例子中的

如果左中右的div下的子div如果要定位的话，用position: relative,要么都用要么都不用