Cacher is the code snippet organizer for pro developers

<div class="flow-root">
  <div class="green"></div>      
  <div class="yellow"></div>
</div>
<div class="red"></div>

/*floatの解除方法 その①*/
.flow-root {
  display: flow-root;
  overflow: hidden;/*IE未対応なので必要なら*/
}

/*floatの解除方法 その②*/
/*.flow-root::after {
  content: "";
  display: block;
  clear: both;
}*/

.green {
  background-color: green;
  width: 200px;
  height: 200px;
  float: left;
}

.yellow {
  background-color: yellow;
  width: 200px;
  height: 200px;
  float: left;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px;
}