Question

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?

Answer 1

Apparently <fieldset> elements are supposed to generate block formatting contexts for their contents:

The fieldset element is expected to establish a new block formatting context.

That’s why floated elements don’t float out of them. I would guess that this has to do with the nature of fieldsets as visual form control groups. There could be other reasons, but off the top of my head that sounds the most plausible.

There doesn’t appear to be a way to undo this, but I wouldn’t be surprised; you can’t destroy a block formatting context after creating it.

---

By the way, <fieldset>s don’t clear floats (unless you give them a clear style of something other than none). When an element clears floats (or is said to have clearance), it clears only the preceding floats that touch it within the same formatting context. A parent element doesn’t clear its children’s floats either, but it can establish a formatting context for them to float in. This is the behavior seen with <fieldset>, and it’s also what happens when you set overflow to something other than visible on a parent element.

From the spec (emphasis mine):

This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box. The ‘clear’ property does not consider floats inside the element itself or in other block formatting contexts.

Additionally, as mentioned in the comments, there is no clearing style defined by browsers for that element, so the default clearing style would already be the default value of none. This is shown in this demo, in which only one of the <fieldset>s coming after the floating box is defined to have clearing properties and is indeed the one clearing the float.

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

.clear {
  clear: right;
}

<div class="float">Float!</div>
<fieldset>
  <legend>Fieldset!</legend>
</fieldset>
<fieldset class="clear">
  <legend>Clearing fieldset!</legend>
</fieldset>

External link of the demo