带大家认识CSS层叠上下文/层叠等级的区别和意义

什么是“层叠上下文”

什么是“层叠等级”

<!-- 因为在同一层叠上下文中优先级为：行内元素>浮动元素>块级元素，因此span中的字符会完整展示出来 -->
 <div>
    <div style="border:1px blue solid; width: 50px; height: 50px; background-color: blue">
        <div style="border:1px black solid; width: 50px; height: 30px; float: left; background-color: black">
            <span style="border:1px red solid; 6666666666666666</span>
        </div>
    </div>
</div>