这是我参与「第四届青训营」笔记创作活动的第24天

堆叠上下文

堆叠上下文也是一个重要的知识点，以下是我的一些总结

stack content 它是一块区域，这块区域由某个元素创建，他规定了该区域中的内容在z轴上排列的先后顺序。

创建堆叠上下文的元素

从后到前的排列顺序

对于兄弟元素。

堆叠级别为负值的堆叠上下文都为堆叠上下文的兄弟元素，并且z-index为负数的时候，比较z-index。 z-index越小，离用户越远，也就是在越后面。如果z-index相同，则写在后面的的在前面。
常规流非定位的块盒
非定位的浮动盒子
常规流非定位行盒然后到非定位元素，非定位的元素中，块盒最后，然后到浮动，再到行盒，也就是文字。常规流行盒覆盖浮动盒子，浮动盒子覆盖常规流块盒。定位但是没设置z-index的或者值为auto的在最前面。定位元素并且不设置z-index的在最上面。然后到z-index尾auto，0 ，和正数的堆叠上下文。
任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
堆叠级别为正值的堆叠上下文

block formatting context bfc 有三种方法可以触发bfc

overflow：hidden；

position：absolute；

float：left/right；

display:inline-block

可以解决浮动元素高度坍塌的问题，定位元素的高度坍塌不行，但是有一定的副作用，最好还是用清除浮动。（也可以用清除浮动）触发bfc的元素的自动高度需要计算浮动元素的高度(但是不会计算定位元素的高度)

创建bfc的元素，它的边框盒不会与浮动元素重叠，也就是说，触发bfc的盒子会避开浮动盒子

创建bfc的元素，不会和它的子元素进行外边距合并

浮动元素产生了浮动流，块级元素看不到，就会忽略，行级元素可以看到，所以会避开。行块了触发bfc，会避开浮动盒子。