为什么< fieldset>清除浮动？ [英] Why do <fieldset>s clear floats?
问题描述
请考虑以下测试用例，其中浮动和内联元素放置在< fieldset> 对比< div> ：
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>
呈现时，fieldsets是200像素高（他们清除浮动？），而div只有与内联元素一样高。这个行为的原因是什么，是否有一个解决方法，允许字段集的行为像divs？
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?
推荐答案
< fieldset> 元素应为其内容生成块格式化上下文：
字段集元素将建立一个新的块格式化上下文。
The
fieldsetelement is expected to establish a new block formatting context.
这就是为什么浮动的元素不会浮出他们。我猜想这与fieldset的性质作为视觉形式控制组。可能有其他原因，但是我的头顶部听起来是最合理的。
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.
似乎没有办法撤消这个，但我wouldn不要惊讶;您不能在创建块格式化上下文后销毁它。
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.
顺便说一句， ; fieldset> c 不清除浮动（除非你给他们）。当元素清除浮动（或称为具有间隙）时，它仅清除在同一格式上下文中触及的浮动元素之前的。父元素不会清除其子元素的浮动，但它可以建立一个格式化上下文以供其浮动。这是在清除 c $ c> none < fieldset> 中看到的行为，这也是当你将 overflow 设置为父元素
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.
从规范（强调我的）：
此属性指示元素框的哪些边可能不会与早前的浮动框相邻。 clear属性不会在元素本身或其他块格式上下文中考虑浮点数 。
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.
此外，如评论中所述，浏览器没有定义元素，因此默认清除样式已经是 none 的默认值。这在此演示中显示为，其中只有一个在浮动框后面的字段集被定义为具有清除属性，并且确实一个清除浮动。
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.
这篇关于为什么< fieldset>清除浮动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
