两栏布局和三栏布局

一、两栏布局

左边固定长度，右边自适应

1. 浮动布局 + BFC

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
</div>
.left{
  float:left;
  border:2px solid red;
  width:100px;
}
.right{
  border:2px solid black;
  display:flow-root
}

2. 浮动布局 / 绝对定位 + 外边距

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
</div>
.left{
  float:left;/* position:absolute; */
  border:2px solid red;
  width:100px;
}
.right{
  border:2px solid black;
  margin-left:100px;
}

3. 使用Flexbox

.contain{
  display:flex;
  flex-direction:row;
}
.left{
  border:2px solid red;
  width:100px;
}
.right{
  border:2px solid black;
  flex:1;  
}

二、三栏布局

两边固定长度，中间自适应

1. 浮动布局 + BFC

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>
</div>
.left{
  border:2px solid red;
  width:100px;
  float:left;
}
.center{
  border:2px solid black;
  display:flow-root;
}
.right{
  border:2px solid red;
  width:100px;
  float:right;
}

2. 浮动布局 / 绝对定位 + 外边距

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>
</div>
.left{
  border:2px solid red;
  width:100px;
  float:left;
}
.center{
  border:2px solid black;
  margin:0 100px
}
.right{
  border:2px solid red;
  width:100px;
  float:right;
}

3. 使用Flexbox

<div class="contain">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>
.contain{
  display:flex;
  flex-direction:row;
}
.left{
  border:2px solid red;
  width:100px;
}
.center{
  border:2px solid black;
  flex:1
}
.right{
  border:2px solid red;
  width:100px;
}