Mat*_*att 13 html css forms fieldset css-float
考虑以下测试用例,其中浮动元素和内联元素放置在一个<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一样？
Bol*_*ock 18
显然,<fieldset>元素应该为其内容生成块格式化上下文:
该
fieldset元素应该建立一个新的块格式化上下文.
这就是浮动元素不浮出它们的原因.我猜这与视觉形式控制组的场集的性质有关.可能还有其他原因,但最重要的是听起来最合理.
似乎没有办法解除这个,但我不会感到惊讶; 在创建块格式化上下文后,您无法销毁它.
顺便说一句,<fieldset>s不清除漂浮物(除非你给它们一种clear除了以外的样式none).当一个元素清除浮动(或者说有间隙)时,它只清除在同一格式化环境中触及它的前面浮动.父元素也不会清除其子元素的浮点数,但它可以为它们建立一个格式化上下文以使它们浮动.这是看到的行为<fieldset>,并且当你设置为父元素overflow之外的其他东西时也会发生这种情况visible.
从规范(强调我的):
此属性指示元素框的哪些边可能不与较早的浮动框相邻.'clear'属性不考虑元素本身或其他块格式化上下文中的浮点数.
此外,如评论中所述,浏览器没有为该元素定义清除样式,因此默认清除样式已经是默认值none.这个演示中显示了这个示例,其中只有一个位于浮动框之后的字段集被定义为具有清除属性,并且确实是清除浮动的那个.