Question

考虑以下测试用例，其中浮动和内联元素放在<fieldset>与<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>

渲染时，字段集高200像素（它们清除浮点数？），而div只有内联元素高。这种行为的原因是什么，是否有一种解决方法允许字段集的行为与div一样？

Answer 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>不会清除浮动（除非你给它们clear样式而不是none。当一个元素清除浮动（或被称为有间隙）时，它只清除在同一格式化上下文中触摸它的前面的浮点数。父元素也不会清除其子元素的浮点数，但它可以为它们建立格式化上下文以使其浮动。这是<fieldset>所见的行为，并且当您设置overflow时也会发生这种情况在父元素上使用visible之外的其他内容。

来自spec（强调我的）：

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

此外，如评论中所述，浏览器没有为该元素定义清除样式，因此默认清除样式已经是none的默认值。这显示为in this demo，其中只有一个位于浮动框之后的字段集被定义为具有清除属性，并且确实是清除浮动属性的字段集。

Answer 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>

为什么<fieldset> s clear floats？</fieldset>

2 个答案: