一些css特性

baseline

应用 display:inline-block; 的元素的 baseline，当其中有 inline 元素时，按 inline 的 baseline；当没 inline元素时，按最低边。

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

BFC

块格式化上下文 Block Formatting Context

1.触发BFC

• 根元素，即HTML标签
• 浮动元素：float值为left、right
• overflow值为 auto、scroll、hidden (不为 visible)
• display值为 inline-block、table-cell、table-caption、table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table、flow-root、flex 或 inline-flex（弹性元素）、grid 或 inline-grid（网格元素）
• 定位元素：position值为 absolute、fixed
• contain 值为 layout、content或 paint 的元素
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

2.作用

BFC是页面上的一个独立的容器，其子元素不会影响到外面元素。
1.包含子元素的浮动，或者避免受其它浮动元素影响。
2.阻止因为浏览器因为四舍五入造成的多列布局换行的情况
3.阻止相邻元素外边距叠加