CSS is awesome

除去以下要讲的“上下文三兄贵”，其他的知识点如float、flex、rem、icon、bootstrap等知识都会在各种实际项目中体现，在此不多讲述。

1.堆叠上下文

1.1. z-index

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

负z-index < background

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的下面空白处消失。