@
blackshow 1 形成新的 bfc
block 元素高度计算不包括 float 子元素
具体见 CSS2.1 10.6.3
Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).
只考虑常规流中的子级（即，浮动盒和绝对定位的盒会被忽略，并且相对定位的盒不考虑其偏移）
添加 overflow: hidden 后,会创建一个新的 block formatting context(块格式化上下文)
具体见 CSS2.1 9.4
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
浮动，绝对定位的元素，非块盒的块容器（例如 inline-blocks，table-cells 和 table-captions ），以及’ overflow ’不为’ visible ’的块盒（当该值已被传播到视口时除外（ except when that value has been propagated to the viewport ））会为其内容建立新的块格式化上下文
而块级上下文高度包括 float 子元素
具体见 CSS2.1 10.6.7
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.
此外，如果该元素含有任意下外边距边界位于元素的内容下边界下方的的浮动后代，那么高度增加至能够包含这些边界。
2 相对于父元素 width 计算
见 CSS2.1 8.4
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.
百分比根据生成盒的包含块的 width 来计算，即使是'padding-top'和'padding-bottom'。
CSS 8.3
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.
百分比根据生成盒的包含块的 width 来计算。注意，这一点对于'margin-top'和'margin-bottom'也适用。
3
都相对于 font-size 计算
对于元素自身来说没区别,但对于内部的子元素有区别
数值直接被继承,1 就是 1.百分比值继承的是百分比*font-size 计算后的结果
具体见 CSS2.1 10.8.1
<number>
The specified length is used in the calculation of the line box height.
该属性的应用值为这个数字乘以该元素的字体大小。
<percentage>
The used value of the property is this number multiplied by the element's font size.
该属性的计算值为这个百分比乘以该元素的字体大小的计算值。
4
inline 元素默认对齐基线,也就是 vertical-align: baseline
而 inline-block 里没内容时对齐元素底部,也就是图片坐在了基线上
解决办法是 vertical-align: non baseline,例如 vartical-align: top,或者给容器加上 font-size: 0
具体见 CSS 2.1 10.8.1
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
把盒的基线与父级盒的基线对齐。如果该盒没有基线，就把下外边距边界和父级的基线对齐
若有错误请指正