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

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

<h4>height設定あり(1)</h4>
<p>回り込む部分をずらして表示。</p>
<div class="height1">
  <div class="d1">1</div>
  <div class="d2">2</div>
</div>
<div class="d3">3</div>

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

<h4>height設定あり(2)</h4>
<p>子要素サイズと親要素サイズのバランス調整が難しい。</p>
<div class="height2">
  <div class="d1">1</div>
  <div class="d2">2</div>
</div>
<div class="d3">3</div>

.height1{
  /* 子要素よりも大きい値を設定
     子要素:100px + solid:3px * 2(両辺分) = 106px
  */
  height:106px;
}
.height2{
  /* 子要素よりも小さい値を設定
     子要素:100px + solid:3px * 2(両辺分) = 106px
  */
  height:60px;
}
.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;
}