Why do <fieldset>s clear floats?

Consider the following test case, in which a floated and an inline element are placed inside a <fieldset> versus a <div>:

.float {
  float: right;
  background-color: red;
  height: 200px;
}

<h1>With fielset</h1>
<fieldset>
  <span>Inline!</span>
  <div class="float">Float!</div>
</fieldset>
<fieldset>
  <span>Inline!</span>
  <div class="float">Float!</div>
</fieldset>

<h1>With div</h1>
<div>
  <span>Inline!</span>
  <div class="float">Float!</div>
</div>
<div>
  <span>Inline!</span>
  <div class="float">Float!</div>
</div>

When rendered, fieldset containers are 200 pixels tall (they clear the floats?) while the div containers are only as tall as the inline elements. What is the cause of this behavior, and is there a workaround which allows the fieldset containers to behave as the div containers do?

Why do <fieldset>s clear floats?

2 Answers