JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float: left;" id="element1">
    Some floating element
</div>
<div id="element2">Some regular div</div>

CSS

.floater {
    float: left;
}

JavaScript

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';
}
console.log(doesElementEstablishNewBlockFormattingContext(document.getElementById('element1')));
console.log(doesElementEstablishNewBlockFormattingContext(document.getElementById('element2')));