如何判断元素是使用Javascript还是工具建立新的块格式上下文？

一些元素根据它们是否满足某些条件而建立新的属性。理解这一点对于能够在CSS中正确使用浮动非常重要

我想要一个工具来查看给定元素是否建立了新的块格式上下文。在Firefox的inspector工具中添加一行这样的文本是理想的：显然，这样的工具并不存在

如果这样的东西在浏览器中还不存在，我想自己开发一个扩展来实现这一点，要做到这一点，我需要能够使用Javascript查看每个元素。是否有一个DOM API调用可以告诉我某个元素是否建立了一个新的块格式上下文？像这样的东西很理想：

var res = doesElementEstablishNewBlockFormattingContext(document.getElementById("foo"));

如果没有，我可以用Javascript检查是否满足所有条件，但这将是最后的手段

---

TLDR:是否已经有工具、扩展或API调用可以告诉我a元素是否建立了新的块格式上下文？

根据提供的规则，您可以为此编写自己的函数：

function doesElementEstablishNewBlockFormattingContext(element) {
    var elementStyle = getComputedStyle(element);

    return elementStyle.getPropertyValue('float') != 'none' ||
        ['absolute', 'fixed'].indexOf(elementStyle.getPropertyValue('position')) !== -1 ||
        ['inline-block', 'table-cell', 'table-caption', 'flex', 'inline-flex'].indexOf(elementStyle.getPropertyValue('display')) !== -1 ||
        elementStyle.getPropertyValue('overflow') != 'visible';
}

请参见Internet Explorer中的类似内容，但不完全是这样。作为IE渲染引擎的专有部分，使用了

hasLayout

属性。它大致相当于创建一个新的块格式上下文

console.log（document.getElementById（“id”）.currentStyle.hasLayout）

将向您展示IE的想法。阅读了解更多信息

---

除此之外，在前面的问题中还有一些有趣的建议，比如，讨论我认为大致相同的问题。

我认为您可以制作一个JS片段并将其用作书签，这样：@GiacomoPaita:我知道，但是我缺少Javascript的关键部分，它可以告诉我一个元素是否形成了一个新的块格式上下文。开始制作演示吧，如果它列出了确定是否建立了一个新上下文的步骤，但是没有一个到现有函数的方便链接，我愿意打赌这样的标准API是不存在的。基于这些步骤编写函数应该不难；section博士让这个问题看起来像是一个工具推荐问题。如果这个问题没有被解决，这个答案是最接近获得赏金的。