<div class="container">
  <div class="block">div</div>
  <div class="block2">after div</div>
  <div class="float-left">float-left</div>
  <div class="float-left">float-left2</div>
  <div class="float-right">float-right</div> 
  <div class="block">after float div here text potsition check</div>
  <div class="clear-left">clear left div</div>
  <div class="float-left">float-left</div>  
  <div class="float-right">float-right</div>
  <div class="clear-right">clear right div</div>
  <div class="float-left">float-left</div>  
  <div class="float-right">float-right</div>
</div>
.container {
  width: 350px;
  background: grey;
  overflow: hidden;
}

.block {
  background: cornflowerblue;
  text-align: center;
}

.block2 {
  background: darkolivegreen;
  color: white;
  text-align: center;
  width: 100px;
  height: 100px;
}

.float-left {
  background: coral;
  width: 100px;
  height: 100px;
  float: left;
  text-align: center;
  opacity: 0.7;
}

.float-right {
  background: coral;
  width: 100px;
  height: 150px;
  float: right;
  text-align: center;
  opacity: 0.7;
}

.clear-left {
  clear: left;
  width: 100px;
  height: 100px;
  background: burlywood;
  text-align: center;
}
.clear-right {
  clear: right;
  width: 100px;
  height: 100px;
  background: burlywood;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.