如何实现两栏布局，右侧自适应？

方法一：

       使用float左浮左边框

       右边模块使用margin-left撑出内容块做内容展示

        为父级元素增加BFC，防止下方元素飞到上方内容区

//页面
<div class="box">

         <div class="left">左边</div>

         <div class="right">右边</div>

</div>

//css样式
<style>

 .box{
   overflow: hidden; //添加BFC
 }

 .left {
   float: left;
   width: 200px;
   background-color: gray;
   height: 400px;
 }

 .right {
   margin-left: 210px;
   background-color: lightgray;
   height: 200px;
 }
</style>
 

---

方法二：

      flex容器的一个默认属性值：align-items：stretch 这个属性导致了等高的效果

      为了让两个高度自动需要设置：align-items：flexstart

//页面
<div class="box">

         <div class="left">左边</div>

         <div class="right">右边</div>

</div>
 

 

// css样式
<style>

 .box{
   display: flex;
 }

 .left {
   width: 100px;
 }

 .right {
   flex: 1;
 }

</style>
 

---

结束！！！ 自己理解  有问题可一起讨论！！！