démo clear

by Arnaud

HTML

clear : none;
<div class="boiteParent">
<div class="boiteFlotante" style="float:left">boite Flottante<br> float:left</div> <div class="boiteFlotante" style="float:right; height:150px">boite Flottante<br> float:right</div>
<p style="clear:right">
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
</p>
</div>

clear:left;
<div class="boiteParent">
<div class="boiteFlotante" style="float:left">boite Flottante<br> float:left</div> <div class="boiteFlotante" style="float:right; height:150px">boite Flottante<br> float:right</div>
<p style="clear:left">
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
</p>
</div>

clear:right;
<div class="boiteParent">
<div class="boiteFlotante" style="float:left">boite Flottante<br> float:left</div> <div class="boiteFlotante" style="float:right; height:150px">boite Flottante<br> float:right</div>
<p style="clear:right">
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
</p>
</div>

clear:both;
<div class="boiteParent">
<div class="boiteFlotante" style="float:left">boite Flottante<br> float:left</div> <div class="boiteFlotante" style="float:right; height:150px">boite Flottante<br> float:right</div>
<p style="clear:both">
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
</p>
</div>

CSS

.boiteParent{
  border:1px solid black;
  margin: 0 0 40px;
  width:300px;
}

.boiteFlotante{
  background:yellow;
  border:1px solid black;
}