考虑以下测试用例，其中浮动元素和内联元素放置在<fieldset>与一个<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>
渲染时，fieldset容器高 200 像素（它们清除浮动？）div容器的高度仅与内联元素一样高。造成这种行为的原因是什么？是否有解决方法可以让fieldset容器的行为就像div容器呢？
显然<fieldset>元素应该为其内容生成块格式化上下文 http://www.w3.org/TR/html5/rendering.html#the-fieldset-and-legend-elements:
The fieldset元素预计会建立一个新的块格式化上下文。
这就是浮动元素不会从其中浮动的原因。 http://www.w3.org/TR/CSS21/visuren.html#block-formatting我猜想这与字段集作为视觉形式控制组的性质有关。可能还有其他原因，但从我的角度来看，这听起来是最合理的。
似乎没有办法撤销这一点，但我不会感到惊讶；创建块格式化上下文后无法销毁它。
顺便一提，<fieldset>s don't clear浮动（除非你给他们一个clear风格以外的东西none）。当一个元素清除浮动（或者说有清除）时，它只清除前在相同的格式化上下文中接触它的浮动。父元素也不会清除其子元素的浮动，但它可以为它们建立浮动的格式化上下文。这是使用<fieldset>，这也是当你设置时会发生的情况overflow除了visible在父元素上。
来自spec http://www.w3.org/TR/CSS21/visuren.html#flow-control（强调我的）：
该属性指示元素框的哪一侧可以not与较早的浮动框相邻。“clear”属性不考虑元素本身或其他元素内部的浮动块格式化上下文 http://www.w3.org/TR/CSS21/visuren.html#block-formatting.
此外，正如评论中提到的，浏览器没有为该元素定义清除样式，因此默认清除样式已经是默认值none。此演示中显示了这一点，其中只有一个<fieldset>s 在浮动框被定义为具有清除属性之后出现，并且确实是清除浮动的那个。
.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>
演示的外部链接 http://jsfiddle.net/BoltClock/uD2C8
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
