CSS clear types

clear.css

/* 1 */
.clear {
  clear: both;
  font: 0/0 a;
  height: 0;
  visibility: hidden;
}

/* 2 */
.clear:before,
.clear:after {
  clear: both;
  content: " ";
  display: table;
}

/* 3 */
.clear { overflow: hidden; }

clear.html

<!-- 1 -->
<div style="float:left;width:50%"></div>
<div style="float:left;width:50%"></div>
<div class="clear"></div>

<!-- 2 -->
<div class="clear">
  <div style="float:left;width:50%"></div>
  <div style="float:left;width:50%"></div>
</div>

<!-- 3 -->
<div class="clear">
  <div style="float:left;width:50%"></div>
  <div style="float:left;width:50%"></div>
</div>

<!-- obsolete -->
<div style="float:left;width:50%"></div>
<div style="float:left;width:50%"></div>
<br clear="all" />