理解margin负值，实现经典布局

margin负值

block元素可设置四个方向的值，无论正负。

inline元素上下margin值无效，左右无论正负均有效

inline-block元素，当vertical-align为baseline时，上下margin负值无效，其他情况正负均有效。

元素重叠

两个块级元素发生重叠，后面的元素能覆盖前面元素的背景，无法覆盖内容

两个行内元素发生重叠（包括inline+ inline, inline-block + inline-block, inline-block + inline），后面元素能覆盖前面元素的背景和内容

行内元素和块级元素重叠（包括inline + block, inline-block + block），行内元素覆盖块级元素的背景

块级元素和浮动元素重叠，块级元素的背景在在浮动元素下，内容在浮动元素之上

行内元素或行内块元素与浮动元素叠加，背景和内容都在浮动元素之上

行内元素或块级元素与定位元素重叠（position非static），定位元素覆盖其他元素的背景和内容

布局应用

html,body {
    margin: 0;

  }

  .box {
    overflow: hidden;
    width: 100%;
    min-height: 100%;
  }

  .left {
    width: 100px;
    float: left;
    background-color: pink;
  }

  .right {
    width: 100px;
    float: right;
    background-color: pink;
  }

  .main {
    margin: 0 110px;
    background-color: lightgreen;
  }

  .main,
  .left,
  .right {
   margin-bottom: -9999px;
   padding-bottom: 9999px;
  }

  <div class="box">
    <div class="left">左侧文字比较少</div>
    <div class="right">右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多右侧文字比较多</div>
    <div class="main">中间文字比较少</div>
  </div>

等高布局实现原理，左边的盒子左浮动，右边的盒子右浮动，中间盒子设置左右margin，大小为左右盒子的宽度，这三步实现了左右固定中间自适应布局。为左中右三个盒子设置padding-bottom极大值，margin-bottom负的极大值，实现等高布局。以上又叫圣杯布局