为什么清晰的浮标？

一尘不染

为什么清晰的浮标？

css

考虑以下测试用例，其中一个float元素和一个inline元素放置在a <fieldset>与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>

呈现时，字段集的高度为200像素（它们清除浮点数了吗？），而div的高度仅与内联元素一样高。造成这种现象的原因是什么，是否有一种解决方法可以使这些字段集像div一样起作用？

阅读 271

2020-05-16

共1个答案

一尘不染

显然，<fieldset>元素应该为其内容生成块格式上下文：

fieldset期望该元素建立新的块格式化上下文。

这就是为什么浮动元素不会从其中浮动出来的原因。我想这与字段集作为可视表单控件组的性质有关。可能还有其他原因，但听起来似乎最合理。

似乎没有一种方法可以撤消此操作，但是我不会感到惊讶。创建完块格式化上下文后，您将无法销毁它。

顺便说一句，<fieldset>s不会清除
浮点数（除非您给它们赋予clear以外的其他样式none）。当元素清除浮点数（或说具有间隙）时，它仅清除在相同格式上下文中与之接触的 先前的
浮点数。父元素也不会清除其子元素的浮点数，但是它可以为它们的浮动对象建立一个格式化上下文。这是在中看到的行为<fieldset>，当您设置overflow为除visible父元素之外的其他值时，也会发生这种情况。

从规格（重点是我的）：

此属性指示元素框的哪些边可能不与较早的浮动框相邻。 ‘clear’属性不考虑元素本身内部或其他
块格式化上下文中的
浮点数 。

此外，如评论中所述，浏览器没有为该元素定义清除样式，因此默认清除样式将已经是的默认值none。此演示中对此进行了展示，其中仅将浮点框之后的字段集定义为具有清除属性，而实际上是清除浮点的域集。

2020-05-16

为什么 清晰的浮标？

共1个答案

为什么清晰的浮标？