1.堆叠上下文

1.1. z-index

先要讲的就是z-index，在浏览器中显示的先后顺序。
自下而上分别是：

负z-index < background <border < div块级 < 浮动元素 < z-index:0/auto < 正z-index

1.2.堆叠上下文

触发堆叠上下文后，其内部元素自成体系，不与父元素外的元素对比。在一个堆叠上下文里，谁大谁上，一样大就后来居上。

触发堆叠上下文

根元素HTML
z-index不为auto的绝对/相对定位
z-index不为auto的flex项目
opacity小于1
transform不为none
position:fixed
以上是部分常用触发堆叠上下文，还有更多的不常用就不罗列了。

2.BFC

2.1.块格式化上下文

原文表述就算了，就是指，触发BFC后，子元素不会影响到父元素以外的元素。
触发BFC

float不为none
overflow不为auto,scroll,hidden
display为table-cell,table-caption,inline-block
position不为relative和static

2.2.有效的触发BFC

触发BFC的方式多半都有副作用
1.float布局：float后元素浮动，比较常用，到那时会导致父元素高度坍塌，需要clearfix弥补
2.position:absolute：绝对定位，父元素需要用相对定位
3.overflow:hidden：溢出的部分会被剪裁
4.display:inline-block：还是少用inline-block
综上，最实用的还是float+clearfix

3.IFC

3.1.内联格式化上下文

大概就是内联元素的高度是怎么计算的，极度坑爹。

3.2.各种高度

https://zhuanlan.zhihu.com/p/25808995
我实在解释不下去了，反正就是很坑爹，总结就是你别想对齐2种字体

3.3用处

我所知道IFC的一种用处就是让img的下面空白处消失。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS is awesome