传统布局

左右布局（一栏固定一栏自适应）

BFC

<div>
  <div class="left"></div>
  <div class="right"></div>
</div>
.left{float: left; width: 10em}
.right{overflow: hidden}

---

float(书写顺序相反的情况)

<div class="box">
  <div class="right"></div>
  <div class="left"></div>
</div>
.box{padding-left: 10em;}
.right{float: left; width: 100%;}
.left{
  float: left; 
  width: 10em; 
  margin-left: -10em; 
  position: relative; 
  left: -100%
}

---

（伪）等高
实现左右两栏高度一致，左右都保持高度高的那一边的高度。

.box{overflow: hidden}
.left{padding-bottom: 99em; margin-bottom: -99em} 
.right{padding-bottom: 99em; margin-bottom: -99em} 

---

position
.right的内容必须必.left的高度高，否则溢出

.box{position: relative; }
.right{margin-left: 10em}
.left{position: absolute; top: 0; left: 0; bottom: 0;/*会撑开容器,或者高度100%*/}

---

table layout
1.表格
table: border-collapse 合并单元格
不指定宽度，宽度自适应。
2.表格布局

display对应的table标签属性.png

.box{display: table}
.left, .right{display: table-cell}

3.布局导航栏

nav{display: table;  border-collaspe: collaspe; width: 100%; line-heigth: 3; table-style: fiexd /*固定宽度*/}
a {
    display: table-cell;
    text-decoration: none;
    background-color: lightblue;
    color: aliceblue;
    border: 1px solid #fff;
    text-align: center;
}

---