当前位置: 首页 > 面试题库 >

为什么 清晰的浮标?

屠德宇
2023-03-14
问题内容

考虑以下测试用例,其中一个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一样起作用?


问题答案:

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

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

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

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

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

从规格(重点是我的):

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

浮点数

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



 类似资料:
  • 本文向大家介绍为什么会出现浮动?在什么时候需要清除浮动呢?相关面试题,主要包含被问及为什么会出现浮动?在什么时候需要清除浮动呢?时的应答技巧和注意事项,需要的朋友参考一下 @xiangshuo1992 是的,有相关联,第75天的题是问了它的工作原理,今天是问它为什么会出现浮动,还是有些区别。呵呵,我出题时,就猜到你会记得之前有出过了……果然

  • 问题内容: 问题很简单而且简短:为什么要清除浮动?我查看了w3标准文档,但没有任何暗示。 问题答案: 因为当您与其他任何东西一起使用时会建立一个新的块格式设置上下文(链接到w3.org规范)。

  • 问题内容: 只是一个简单的问题: 如何清除外壳中的屏幕?我见过类似的方式: 这只是打开Windows cmd,清除屏幕并关闭,但是我希望清除外壳窗口 (PS:我不知道这有帮助,但是我使用的是Python 3.3.2版) 谢谢:) 问题答案: 对于macOS / OS X,您可以使用子进程模块并从外壳程序中调用“ cls”: 为了防止在窗口顶部显示“ 0”,请用以下内容替换第二行: 对于Linux,

  • 问题内容: 当我创建我的(有史以来第一次)两列时,我的问题浮出水面。 我的左,右列都有一个包装器,但是包装器的高度没有扩大到适合左,右列的位置,每一个分别漂浮在其侧面。 我在网上找到了一个解决方案,在该解决方案中,它向包装器添加了样式“overflow:auto”(这是对吗?)。 但是,在我的研究中,没有什么能以一种我可以理解的方式解释为什么包装器的高度不能自动扩展以适应嵌套的divs和两列。 嵌

  • 获得场景视频可为客户转出“普通”“清晰”“高清”“pad”“phone”五种的清晰度,转出越多占用空间越大,您可根据实际需求具体选择。 在该页面,您可为用户设置默认清晰度,以满足效果和成本的平衡。 默认码率和对应视频尺寸见下表: 清晰度规则: · 您上传的视频源文件视频码率高于512kbps或分辨率大于640×480才能转换出高清视频; · 对于多种清晰度的视频,获得场景视频服务平台支持您设置您帐

  • 自动识别图像进行人脸变清晰处理模式一 返回二进制文件流模式二 返回base64字符串模式三 通过图片url返回base64结果 人脸变清晰API调用示例代码 github地址: https://github.com/picup-shop cURL Python PHP Java nodejs .net Objective-C curl -H 'APIKEY: INSERT_YOUR_API_KEY