为什么 <fieldset>s 清除浮动? [英] Why do <fieldset>s clear floats?

问题描述

考虑以下测试用例，其中浮动元素和内联元素放置在

与

中:

.float {浮动:对；背景颜色:红色；高度:200px；}

<h1>with fielset</h1><字段集><span>内联！</span><div class="float">Float!</div></fieldset><字段集><span>内联！</span><div class="float">Float!</div></fieldset><h1>与 div</h1><div><span>内联！</span><div class="float">Float!</div>

<div><span>内联！</span><div class="float">Float!</div>

渲染时，fieldset 容器高 200 像素(它们清除浮动?)而 div 容器仅与内联元素一样高.这种行为的原因是什么，是否有一种解决方法可以让 fieldset 容器像 div 容器一样运行?

解决方案

显然是

元素 应该为其内容生成块格式上下文:

<块引用>

fieldset 元素有望建立新的块格式上下文.

这就是浮动元素不会从它们中浮出的原因. 我猜这与字段集作为视觉表单控件组的性质有关.可能还有其他原因，但我认为这听起来最合理.

似乎没有办法撤消此操作，但我不会感到惊讶；创建块格式上下文后，您无法销毁它.

---

顺便说一下，

不会clear浮动(除非你给他们一个clear风格的东西而不是<代码>无).当一个元素清除浮动(或者说有清除)时，它只清除在相同格式上下文中接触它的前面浮动.父元素也不会清除其子元素的浮点数，但它可以为它们建立一个格式化上下文以使其浮入.这是使用

看到的行为，这也是当你在父元素上将 overflow 设置为 visible 以外的值.

来自规范(重点是我的):

<块引用>

此属性指示元素框的哪一侧不与较早的浮动框相邻.'clear' 属性不考虑元素内部或其他元素中的浮动 块格式上下文.

另外，正如评论中提到的，浏览器没有为该元素定义清除样式，因此默认清除样式已经是 none 的默认值.在这个演示中展示了这一点，其中只有一个

在浮动框之后被定义为具有清除属性，并且确实是清除浮动的那个.

.float {浮动:对；背景颜色:红色；高度:200px；}.清除 {清楚:对；}

<div class="float">Float!</div><字段集><legend>字段集！</legend></fieldset><fieldset class="clear"><legend>清除字段集！</legend></fieldset>

演示外部链接

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?

解决方案

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

这篇关于为什么 &lt;fieldset&gt;s 清除浮动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！