前端两栏布局和三栏布局

两栏布局
左边盒子定宽度右边盒子自适应
【浮动➕ marin实现】

  <div class="twoContain">
    <div class="twoContainSonLeft">twoContainSonLeft</div>
    <div class="twoContainSonRight">twoContainSonRight</div>
  </div>


.twoContain {
      height: 300px;
    }
    /* 左边盒子定宽右边自适应
     */
    .twoContain .twoContainSonLeft {
      width: 300px;
      background-color: yellowgreen;
      float: left;
      height: 100%;
    }

    .twoContain .twoContainSonRight {
      margin-left: 300px;
      background-color: blue;
    }

用flex布局也可以实现两栏布局

.twoContain {
      height: 300px;
      display: flex;
    }

    .twoContain .twoContainSonLeft {
      width: 300px;
      background-color: yellowgreen;
      height: 100%;
    }

    .twoContain .twoContainSonRight {
      flex: 1;
      background-color: blue;
    }

浮动+BFC实现两栏布局

.twoContain {
      height: 300px;
    }

    .twoContainSonLeft {
      float: left;
      /* 定宽 */
      width: 200px;
      height: 100%;
      background-color: chartreuse;
    }

    .twoContainSonRight {
      /* 不设置宽度自适应 */
      height: 100%;
      /*触发BFC条件*/
      overflow: hidden;
      background-color: coral;
    }

左边盒子不定宽度右边盒子自适应
浮动+BFC实现两栏布局
原理:给正常元素添加BFC属性，正常元素就不会被遮挡，且环绕浮动元素排开

.twoContain {
      height: 300px;
    }

    .twoContainSonLeft {
      float: left;
      /* 不定宽 */
      height: 100%;
      background-color: chartreuse;
    }

    .twoContainSonRight {
      /* 不设置宽度自适应 */
      height: 100%;
      /*触发BFC条件*/
      overflow: hidden;
      background-color: coral;
    }

一波小总结：以上脱离文档流的方式(如浮动、定位)，他们的大体思路都是: 先让左定宽元素脱离文档流，这样可以右列正常能够与左列脱离文档流的元素“站成一排”，此时左列元素还覆盖着右列元素，最后，我们只需要调整一下右列元素的外边距啊、定位啊什么的就可以完成啦~

用flex布局也可以实现两栏布局

.twoContain {
  height: 300px;
  display: flex;
}

.twoContain .twoContainSonLeft {
  background-color: yellowgreen;
  height: 100%;
}

.twoContain .twoContainSonRight {
  flex: 1;
  background-color: blue;
}

三栏布局
三栏布局的效果就是左边盒子固定宽度,右边盒子固定宽度,中间盒子自适应
方法一触发BFC

  <div class="threeContain">
    <div class="threeContainSonLeft">threeContainSonLeft</div>
    <div class="threeContainSonRight">threeContainSonRight</div>
    <div class="threeContainSonMiddle">threeContainSonMiddle</div>
  </div>
.threeContain{
      
    }
    .threeContainSonLeft{
      width: 200px;
      float: left;
      background-color: red;
    }
    .threeContainSonMiddle{
      background-color: blue;
      overflow: hidden;
    }
    .threeContainSonRight{
      width: 200px;
      float: right;
      background-color: green;
    }

原理：让左右两边盒子分别左右浮动,然后中间盒子的div写在左右两个盒子下面然后通过overflow去触发BFC让盒子围绕脱离文档流的元素排列。

方法二让中间盒子使用margin-left和margin-right去处理

.threeContain{

    }
    .threeContainSonLeft{
      width: 200px;
      float: left;
      background-color: red;
    }
    .threeContainSonMiddle{
      background-color: blue;
      margin-left: 200px;
      margin-right: 200px;
    }
    .threeContainSonRight{
      width: 200px;
      float: right;
      background-color: green;
    }

通过flex布局实现三栏布局

  <div class="threeContain">
    <div class="threeContainSonLeft">threeContainSonLeft</div>
    <div class="threeContainSonMiddle">threeContainSonMiddle</div>
    <div class="threeContainSonRight">threeContainSonRight</div>
  </div>
.threeContain{
      display: flex;
    }
    .threeContainSonLeft{
      width: 200px;
      background-color: red;
    }
    .threeContainSonMiddle{
      background-color: blue;
      flex: 1;
    }
    .threeContainSonRight{
      width: 200px;
      background-color: green;
    }

通过定位实现三栏布局【两栏布局也可以用定位】
注意div的盒子顺序

  <div class="threeContain">
    <div class="threeContainSonLeft">threeContainSonLeft</div>
    <div class="threeContainSonRight">threeContainSonRight</div>
    <div class="threeContainSonMiddle">threeContainSonMiddle</div>
  </div>
.threeContain{
      position: relative;
    }
    .threeContainSonLeft{
      position: absolute;
      left: 0;
      width: 200px;
      background-color: red;
    }
    .threeContainSonMiddle{
      background-color: blue;
      margin-left: 200px;
      margin-right: 200px;
    }
    .threeContainSonRight{
      position: absolute;
      right: 0;
      width: 200px;
      background-color: green;
    }