<h4># display:flow-root設定なし</h4>
<p>3の要素が1,2の下に回り込んでいる。</p>
<div>
  <div class="d1">1</div>
  <div class="d2">2</div>
</div>
<div class="d3">3</div>

<div style="clear:both;"></div><br><hr >

<h4>display:flow-root設定あり</h4>
<p></p>
<div class="fl">
  <div class="d1">1</div>
  <div class="d2">2</div>
</div>
<div class="d3">3</div>

<div style="clear:both;"></div><br><hr >

.fl{
  display:flow-root;
}
.d1, .d2, .d3{
  height:100px;
  border:solid 3px;
}
.d1{
  width:100px;
  background-color:lime;
  float:left;
}
.d2{
  width:80px;
  background-color:skyblue;
  float:left;
}
.d3{
  width:150px;
  background-color:orange;
}