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

Question

某些元素会根据它们是否符合某些条件而建立新的block formatting context。理解这一点非常重要，能够在CSS中正确使用浮点数等。

我想要一个工具来查看给定元素是否确实建立了新的块格式化上下文。像这样的Firefox检查器工具中的另一行文本是理想的：显然，这样的工具不存在。

如果因为这样的东西在浏览器中已经存在，我想开发一个自己做的扩展，为此，我需要能够看看在每个元素使用Javascript。是否有DOM API调用会告诉我某个元素是否建立了新的块格式化上下文？这样的事情是理想的：

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

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

TLDR： 已经工具或扩展程序或 API调用这将告诉我一个元素是否建立了一个新的块格式化上下文？

Answer 1

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

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';
}

请参阅http://jsfiddle.net/4ccbsgs5/

Answer 2

喜欢这个，但不完全是这个，在Internet Explorer中存在。作为IE渲染引擎的专有部分，使用hasLayout属性。它与粗略对应于创建新的块格式化上下文。

console.log(document.getElementById("id").currentStyle.hasLayout)会告诉你IE的想法。请阅读this blog post以获取更多信息。

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