布局------二、三列布局篇

两列布局：（一边定宽，一边自适应的布局）

• 第一种：（左边定宽加浮动，右面margin-left:左面盒子宽度）

这一种方式的缺点：应为浮动，所以当右面盒子的子元素中样式含有：clear:both:会影响到左侧的盒子的浮动，高度会被撑起来，既不会到一行了~~~（所以采用该方式实现两列布局时，注意不要用该属性哦）

 .box:first-child {
        float: left;
        width: 200px;
        background-color: #00ff40;
      }

      .box:nth-child(2) {
        background-color: #ffff80;
        margin-left: 200px;
      }

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

• 第二种：（左边定宽加浮动，右面overflow:hidden）

这一种的话：采用overflow:hidden，当文本内容溢出的话，会被隐藏掉。

 .box:first-child {
        float: left;
        width: 200px;
        background-color: #00ff40;
      }

      .box:nth-child(2) {
        background-color: #ffff80;
        /* margin-left: 200px; */
        /* 开启BFC模式，使得内部结构与外部完全隔离 */
        overflow: hidden;
      }


 <div class="box"></div>
    <div class="box">kkaljflasjd</div>

• 第三种：table,table-cell,table-layout布局

 .parent {
        display: table;
        table-layout: fixed;
      }

      .left,
      .right {
        height: 200px;
        display: table-cell;
      }

      .parent .left {
        width: 200px;
        background-color: #00ff40;
      }

      .parent .right {
        background-color: #ffff80;
      }


 <div class="parent">
      <div class="left"></div>
      <div class="right">232432432424</div>
    </div>

• 第四种：flex布局的方式（）

.parent{
  height:500px;
  border:1px solid #222;
  display:flex;/*设为伸缩容器*/
  flex-flow:row;/*伸缩项目单行排列*/
}
.stable{
  width:200px;/*固定宽度*/
  border:1px solid  #ccc;
  margin:20px;
}
.change{
  flex:1;/*这里设置为占比1，填充满剩余空间*/
  border:1px solid #ff4400;
  margin:20px;
}

  <div class="parent">  
    <div class="stable">stable 固定宽度200px</div>  
    <div class="change">changeable 可变宽度</div>  
  </div>  

三列布局：（左边两列定宽，右边的自适应）

• 第一种:采用左边float,右边自适应

.center,
      .left,
      .right {
        height: 300px
      }

      .left {
        float: left;
        width: 200px;
        background-color: #00ff40;

      }

      .center {
        float: left;
        width: 200px;
        background-color: #1637ce;
      }

      .right {
        margin-left: 400px;
        background-color: #ffff80;
      }


<div class="parent">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>

•  第二种:采用flex布局实现三列布局

 .parent_1 {
        display: flex;
      }

      .center_1,
      .left_1,
      .right_1 {
        height: 300px
      }

      .left_1 {
        flex: 0 0 200px;
        width: 200px;
        /* 这里写两个宽度,主要有些时候可能flex写法会无效,即不兼容时, */
        background-color: #00ff40;

      }

      .center_1 {
        flex: 0 0 200px;
        width: 200px;
        background-color: #1637ce;
        text-align: center;
      }

      .right_1 {
        flex: 1;
        background-color: #ffff80;
      }


 <div class="parent_1">
      <div class="left_1"></div>
      <div class="center_1">flex实现三列布局</div>
      <div class="right_1"></div>
    </div>