html – 为什么要清楚浮动？

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

渲染时,fieldets的高度是200像素(它们清除浮点？),而div只有与内联元素一样高.这种行为的原因是什么？是否有一种解决方法可以让这些字段与div做一样的行为？

解决方法

显然< fieldset>元素 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.我猜想这与视觉形式控制组的fieldets的性质有关.可能有其他原因,但是我的头顶部听起来最可信.

似乎没有办法撤销这个,但我不会感到惊讶;创建块后,不能破坏块格式上下文.

顺便说一下,< fieldset> s不清除浮动(除非你给他们一个明确的风格,而不是没有).当一个元素清除浮点(或据说有空格)时,它只清除在相同格式化上下文中触及的浮点.父元素也不会清除其孩子的浮点数,但是它可以建立一个格式化上下文,以便它们浮动.这是< fieldset>所看到的行为,当将溢出设置为不可见的时候,会发生什么在父元素上.

从spec(重点矿)：

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 07003.

另外,如在注释中提到的那样,没有为该元素定义浏览器的清除样式,因此默认清除样式已经是默认值none.这显示为in this demo,其中只有一个在浮动框之后的字段集被定义为具有清除属性,并且确实是清除浮点数.

原文链接：https://www.f2er.com/html/230533.html

html – 为什么要清楚浮动？

解决方法

猜你在找的HTML相关文章