SOURCE

    <div class="main">
    <span class="sp1">Float占据了包含块与行盒之间的空间</span>
    <em class="e">great1</em>
    <span class="sp2">good</span>
    </div>
    <div class="main1">
    <span class="sp3">我是font-size:50的字体 </span>
    <em class="e1">我是小于行盒的高度的字体,我的垂直对齐由vertical-align决定</em>
    </div>
    <div class="main2">
    <span class="sp4">Float占据了包含块与行盒之间的空间</span>
    <em class="e2">当行内盒的宽度小于行盒的宽度时,text-align决定行内盒的水平位置</em>
    </div>

  .main{
      width: 800px;
      overflow: hidden;
      background: #dcdcdc;
    }
    .sp1{
      float:left;
      font-size: 30px;
      border: 1px solid blue;
    }
    .e{
      font-size: 20px;
      border: 1px solid yellow;
    }
    .sp2{
      border: 1px solid yellow;
    }
    .main1{
      width: 1000px;
      background: #F7F7F7;
    }
    .sp3{
      font-size: 30px;
      border: 1px solid blue;
    }
    .e1{
      font-size: 20px;
      vertical-align: bottom;
      border: 1px solid red;
    }
    .main2{
      width: 1400px;
      overflow: hidden;
      text-align: center;
      background: #B8860B;
    }
    .sp4{
      float: left;
      font-size: 30px;
      border: 1px solid red;
    }
    .e2{
      font-size: 20px;
      border: 1px solid blue;
    }