为什么 <fieldset>s 清除浮动？答案

【问题标题】：Why do <fieldset>s clear floats?为什么 <fieldset>s 清除浮动？
【发布时间】：2021-09-14 10:34:26
【问题描述】：

考虑以下测试用例，其中浮动元素和内联元素放置在 <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 容器一样？

【问题讨论】：

如果您不想让他们清除浮动，请尝试为字段集设置 clear: none 的样式
不得不上电脑看看 Jared Farrish 试图在他的小提琴中展示什么......原来他只是在为 OP 拉小提琴，而不是展示其他证据。
@DA @imoda：我很确定字段集的默认清除样式已经是clear: none。
@BoltClock - 我希望你不会太失望......：P
@Jared Farrish：至少今天早上我不再固执地在 iPhone 上浏览了，所以谢谢 :)

标签： html css forms css-float fieldset

【解决方案1】：

显然是<fieldset>元素are supposed to generate block formatting contexts for their contents：

fieldset 元素预计会建立一个新的块格式化上下文。

That's why floated elements don't float out of them. 我猜这与作为可视化表单控制组的字段集的性质有关。可能还有其他原因，但在我看来，这听起来最合理。

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

顺便说一句，<fieldset>s 不会clear 浮动（除非你给他们一个clear 样式而不是none）。当一个元素清除浮动（或被称为有清除）时，它只清除在相同格式上下文中接触它的 前面的 个浮动。父元素也不会清除其子元素的浮动，但它可以为它们建立一个格式化上下文以使其浮动。这是<fieldset> 看到的行为，当您将overflow 设置为除此之外的其他值时也会发生这种情况visible 在父元素上。

来自spec（强调我的）：

此属性指示元素框的哪些边可能不与较早的浮动框相邻。 'clear' 属性不考虑元素本身内部或其他block formatting contexts 中的浮点数。

此外，如 cmets 中所述，浏览器没有为该元素定义清除样式，因此默认清除样式已经是默认值 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>

External link of the demo

【讨论】：

我当然也想不出办法。
最奇怪的是，只有在 HTML5 规范中，fieldsets 才被定义为它们自己的 BFC。它不在 HTML 4 或 CSS 规范中...
我想在某种程度上它确实是有道理的（而且我一直认为非清除 div 的东西很不稳定），因为你会期望一个字段集包含所有孩子的高度。也许早期的规范没有包含它，因为浏览器制造商就是这样做的。
感谢您的澄清。确实，这确实看起来像是“一直都是这样”的情况：archivist.incutio.com/viewlist/css-discuss/110974。看来我将不得不寻找一种不同的方式来进行布局。

【解决方案2】：

设置包装div的高度；

 <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 style="height:200px">    
   <span>Inline!</span>     
  <div class="float">Float!</div> </div> 
 <div style="height:200px">     
 <span>Inline!</span>    
 <div class="float">Float!</div> 
</div>
</body>
</html>

【讨论】：

我认为您并没有完全遵循马特对字段集（而不是 div）的追求。
这是使 div 表现得像字段集一样的可接受方式（我也可以使用现有的众多浮动清除方法之一），但我正在寻找一种解决方案，使字段集的行为与 div 一样。