title: How can I tell whether an element establishes a new block formatting context using Javascript or a tool?
body: <p>Some elements establish a new <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context" rel="nofollow noreferrer">block formatting context</a>, depending on whether they meet certain conditions. Understanding this is quite important to be able to use floats correctly in CSS, among other things.</p>
  
  <p><s>I would like a tool to see whether a given element does establish a new block formatting context. An additional line of text in the inspector tool of Firefox like this would be ideal:</s> Apparently, a tool like this does not exist.</p>
  
  <p><img src="https://i.stack.imgur.com/EGE6l.png" alt="Mock-up"></p>
  
  <p><s>If</s> since something like this doesn't already exist in a browser, I would like to develop an extension that does this myself, and to do that, I will need to be able look at each element using Javascript. Is there a DOM API call that will tell me whether a certain element establishes a new block formatting context? Something like this would be ideal:</p>
  
  <pre><code>var res = doesElementEstablishNewBlockFormattingContext(document.getElementById("foo"));
  </code></pre>
  
  <p>If not, I could check with Javascript whether all the conditions are met, but that would be a last resort.</p>
  
  <p><strong>TLDR:</strong> Is there <s>already a <em>tool</em> or <em>extension</em> or</s> an <em>API call</em> that will tell me if an an element establishes a new block formatting context?</p>