两栏布局与圣杯布局

2021-12-13

`float+margin-left`方案

.wrapper-float {
    overflow: hidden;		// 清除浮动
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}

利用了block级别的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。但是block级别的元素都是独占一行的，所以要想办法让两个block排列到一起。我们知道，block级别的元素会认为浮动的元素不存在，但是inline级别的元素能识别到浮动的元素，inline的内容会被浮动的元素挤开。这样，block级别的元素就可以和浮动的元素同处一行了。为了让右侧盒子和左侧盒子保持距离，需要为左侧盒子留出足够的距离。这个距离的大小为左侧盒子的宽度以及两个盒子之间的距离之和。然后将该值设置为右侧盒子的margin-left。 缺点：

需要清除浮动（如果float的盒子高度大于父元素高度将会溢出，父元素由block元素撑开）
需要计算右侧盒子的margin-left

使用`float+BFC`方法

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

这种情况下，只需要为左侧的浮动盒子设置margin-right，就可以实现两个盒子的距离了。而右侧盒子是block级别的，所以宽度能实现自适应。 缺点:

父元素需要清除浮动

`flex`方案

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;//可将auto重置 实现左侧固定宽度 如 flex：0 0 300px； 左侧300右侧自适应
}

.wrapper-flex .right {
    flex: 1 1 auto;
}//实现自适应

//实现左侧固定右侧自适应

圣杯布局实现双栏方案

左右都浮动,左边自适应元素设置外层div 100%宽度, 这样就会独占一行, 然后里层设置右边的负margin, 把右边元素位置空出来

      .content {
        display: flex;//清楚浮动的影响
        width: 1000px;
        background: rgb(0, 195, 255);
      }
      .left {
        float: left;
        height:700px;
        width: 100%;
        margin-right:-200px;
        background: #0f0;
      }
      .right {
        width:200px;
        float: left;
        background: #00f;
      }

圣杯布局实现三栏中间自适应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        padding: 0 300px 0 200px;
        border: 1px solid black;
      }

      .content {
        float: left;
        width: 100%;
        background: #f00;
      }

      .left {
        width: 200px;
        background: #0f0;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;
      }

      .right {
        width: 300px;
        background: #00f;
        float: left;
        margin-left: -300px;
        position: relative;
        right: -300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">中间内容</div>
      <div class="left">左侧区域</div>
      <div class="right">右侧区域</div>
    </div>
  </body>
</html>

1.三者都设置向左浮动
2.设置content宽度为100%;
3.设置父元素的padding值给左右两个子面板留出空间.
4.设置负边距， left设置负margin-left左边距为100%, 开启相对定位，left面板的left值为负的left面板宽度
5.right设置负margin-left左边距为负的自身宽度（这样可以将right面板上移，相当于总宽度为0），开启相对定位，right面板的right值为负的right面板的值