CSS

[tiodot]

BFC(Block Formatting Context)

1. MDN-Block formatting context
   A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other. 之前一直不理解为什么需要BFC，或者说不理解需要清除浮动的地方就会涉及到BFC。BFC其实就是为了解决块级盒子与浮动元素之间如何渲染的问题。唉，这么久了。。。智商还是硬伤。
2. Understanding Block Formatting Contexts in CSS: 中文翻译版本CSS中的BFC
   BFC的使用

IFC(Inline Formatting Contexts)

1. Inline formatting contexts
   W3C标准，介绍IFC对inline box垂直或者水平位置布局的影响
2. CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

拓展

1. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）
   主要概述的介绍了Normal Flow， Containing block， 进而引出BFC概念以及BFC的用途。
2. 视觉格式化模型
   每个盒的布局由盒尺寸，盒类型，定位方案，树中的其它元素等构成

[tiodot]

布局相关

flex

1. Flex 布局教程：语法篇
   入门必备经典
2. Flex 布局教程：实例篇
   使用flex实现骰子布局，这想法简直完美，形象生动，而且最主要是容易理解。很强
3. A Visual Guide to CSS3 Flexbox Properties
   入门&示例，更加详细具体，配图加代码，一目了然

grid

1. 网格布局（CSS Grid Layout）浅谈
   初步了解相关概念，已经使用grid简易实现圣杯布局