页面布局：两列布局

定宽与自适应

浮动 float + margin

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.left {
  float: left;
  width: 100px;
}
.right {
  margin-left: 120px;
}

简单的布局方法，左侧设置浮动，右侧设置margin-left（避免环绕左侧）的布局方法

优点：容易理解，易于编写
缺点：兼容性问题（IE6有三像素Bug）

浮动 float + margin + (fix)

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<!--css-->
.left {
  float: left;
  width: 100px;
  position: relative; //提高层级
}
.right-fix {
  float: right;
  width: 100%;
  margin-left: -100px;
}
.right {
  margin-left: 120px;
}

通过在 html 文件的 right 上套上一层 right-fix，然后对 right-fix 设置浮动可以解决 IE6 的兼容性问题，然后提高 left 的层级设置定位属性为 relative

优点：结构和样式更加复杂，不利于理解
缺点：兼容性好

浮动 float + overflow

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.left {
  float: left;
  width: 100px;
  margin-right: 20px;
}
.right{
  overflow: hidden;
}

通过设置overflow触发 BFC（Block Formatting Context块级格式化文本）模式，内容与外界隔离，不受浮动影响（不会环绕浮动元素）

优点：设置简单
缺点：兼容性问题（IE6 不支持）

table

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.parent {
  display: table;
  width: 100%; 
}
.left,.right {
  display: table-cell; //不能设置 margin
  table-layout: fixed; //优点 1.加速table渲染。2.实现了布局优先
}
.left {
  width:100px;
  padding-right: 20px;
}

table特点，每列的宽度之和一定是等于表格宽度的，所以设置left，right会自动填满剩下的宽度

缺点：代码较多

flex

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.parent {
  display: flex;
}
.left {
  width: 100px;
  margin-right: 20px;
}
.right {
  flex: 1;
}

flex: 1 => flex: 1,1,0增长因子，收缩因子都是1，基础宽度为0（剩余宽度都分配给了right）

缺点：兼容性问题，性能问题（做一些小范围的布局）

不定宽与自适应

浮动 float + margin 与浮动 float + margin + (fix)

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.left {
  float: left;
  width: 100px;
}
.right {
  margin-left: 120px;
}

不能完成不定宽自适应，width: 100px;与margin-left: 120px;是强耦合的属性

浮动 float + overflow

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.left {
  float: left;
  margin-right: 20px;
}
.right{
  overflow: hidden;
}
.left p {
  width: 200px;
}

可以实现不定宽自适应布局(IE6 有兼容性问题)

table

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.parent {
  display: table;
  width: 100%; 
}
.left,.right {
  display: table-cell;
  /*table-layout: fixed;*/
}
.left {
  /*width: 100px;*/
  width: 0.1%;
  padding-right: 20px;
}
.left p {
  width: 200px;
}

可以实现不定宽自适应布局，如果根据内容适应宽度，应去掉table-layout: fixed,同时更改left宽度width:0.1%(设置 0.1% 有兼容性的考虑，1px 在 IE8 中有问题)，再设置单元格内容（不兼容IE6）

flex

<!--html-->
<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
    <p>right</p>
  </div>
</div>

<!--css-->
.parent {
  display: flex;
}
.left {
  width: 200px;
  margin-right: 20px;
}
.right {
  flex: 1;
}

可以实现不定宽自适应布局(低版本浏览器有兼容性问题)