Consider the following test case, in which a floated and an inline element are placed inside a <fieldset> versus a <div>:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>
When rendered, the fieldsets are 200 pixels tall (they clear the floats?) while the divs are only as tall as the inline elements. What is the cause of this behavior, and is there a workaround which allows the fieldsets to behave as the divs do?
Apparently
<fieldset>elements are supposed to generate block formatting contexts for their contents: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 aclearstyle of something other thannone). 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 setoverflowto something other thanvisibleon a parent element.From the spec (emphasis mine):
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 fieldsets coming after the floating box is defined to have clearing properties and is indeed the one clearing the float.Set height for wrapper div;