左边定宽，右边自适应以及三栏布局

1、左边定宽，右边自适应

1.左边设置浮动，右边宽度设置100%

.left{float:left} 
.right:{width:100%}

2.父容器设置display：flex right部分是设置flex：1
3.左设置浮动，右用cacl去补宽度计算

 .left{float:left} 
 .right:{width:cacl(100vw-200px}

4.首先修改页面结构，为自适应部分添加容器 .container, 同时改变左右部分的位置

2、三栏布局

样式：

<style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
</style>

1、浮动布局

<section class="layout float">
  <style media="screen">
  .layout.float .left{
    float:left;
    width:300px;
    background: red;
  }
  .layout.float .center{
    background: yellow;
  }
  .layout.float .right{
    float:right;
    width:300px;
    background: blue;
  }
  </style>
  <h1>三栏布局</h1>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h2>浮动解决方案</h2>
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
    </div>
  </article>
</section>

浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。
浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。
2、绝对定位布局

<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div{
      position: absolute;
    }
    .layout.absolute .left{
      left:0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center{
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right{
      right:0;
      width: 300px;
      background: blue;
    }
  </style>
  <h1>三栏布局</h1>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>绝对定位解决方案</h2>
      1.这是三栏布局的绝对定位解决方案；
      2.这是三栏布局的绝对定位解决方案;
    </div>
    <div class="right"></div>
  </article>
</section>

绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，你可以很快的就能想出这种布局方式。
缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。

参考：https://www.cnblogs.com/chengzp/p/layout.html

来源：CSDN

作者：weixin_44999830

链接：https://blog.csdn.net/weixin_44999830/article/details/102495033

标签

自适应

background

absolute