<h4># clear:both;設定なし</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>clear:both;設定あり(1)</h4>
<p>2にclear:both;を設定</p>
<div>
  <div class="d1">1</div>
  <div id="both1" class="d2">2</div>
</div>
<div class="d3">3</div>

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

<h4>clear:both;設定あり(2)</h4>
<p>3にclear:both;を設定</p>
<div>
  <div class="d1">1</div>
  <div class="d2">2</div>
</div>
<div id="both2" class="d3">3</div>

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

<h4>clear:both;設定あり(3)</h4>
<p>2と3にclear:both;を設定</p>
<div>
  <div class="d1">1</div>
  <div class="d2 both4">2</div>
</div>
<div id="both3" class="d3 both4 ">3</div>
<div class="d4">4</div>

#both1{
  color:red;
  clear:both;
}
#both2{
  color:red;
  clear:both;
}
#both3{
  margin:5px;/* margin-topのみ反映されない */
}
.both4{
  color:red;
  clear:both;
}

.d1, .d2, .d3, .d4{
  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;
}
.d4{
  width:120px;
  background-color:pink;
}