SOURCE

<div class="box">
  <p class="fl p1" style="width: 50px;margin-right: 10px;border: 1px solid black;">哈撒打发开朗大方哈地方</p>
  <!-- <div class="d1">
    sdfsdfsf
  </div> -->
  <p class="fl" style="width: 50px;margin-left: 0px;border: 1px solid black;">哈撒打发开朗大sdfs ddf sfs dfsdf方哈地方</p>
  
  <!-- <span class="s1"></span> -->
  <br style="clear:both">
  <!-- <div class="fl f1"></div>
  <div class="fl f2"></div>
  <div class="fl f2"></div>
  <div class="fl f1"></div> -->
</div>

<div class="b2">
  <!-- <p class="son2">jhfdjfkl</p> -->
  <div cla></div>
</div>

.box {
  position: relative;
  width: 200px;
  border: 1px solid red;
}

.fl {
  float: left;
}

.fr {
  float: right;
}
.d1 {
  overflow: hidden;
  display: inline-block;
  width: 50px;
  height: 50px;
  background: green;
}

.s1 {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  width: 50px;
  height: 300px;
  background: blue;
}
.f1, .f2, .f3 {
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}
.f2 {
  height: 80px;
}

.p3 {
	background: rgba(255, 0, 0, .3);
}
.s3 {
  float: left;
  width: 50px;
  height: 100px;
  border: 1px solid green;
  margin: 0px 0px 0px -10px;
}

.b2 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 10px solid green;
  margin: 20px 0;
  padding: 10px;
  .son2 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    width: 50%;
    margin: 0px;

    background: rgba(255,0,0,.2);
  }
}