如果一个元素具有 BFC ，则不会影响到外部元素。
margin 重叠。float 的影响。如果不清楚子元素 float ，则会造成父元素高度塌陷，会影响到后面元素布局和定位。<html> 根元素float 的值 【不为】 noneoverflow 的值 【为】 auto、 scroll 或 hiddendisplay 的值 【为】 table-cell、 table-caption 和 inline-block 中的任何一个position 的值 【不为】 relative 和 staticfloat 的本质是为了实现文字环绕效果。主要指文字环绕图片的效果。
float 的特征:
包裹性：由 “包裹” 和 “自适应性” 两部分组成
包裹
假设 float 元素的父元素宽度为 200px，float 元素的子元素为 width: 100px 的图片，则此时 float 元素宽度表现为 “包裹”，宽度为 100px 。
自适应性
假设 float 元素的父元素宽度为 200px，float 元素的子元素包括图片和文字，则此时 float 元素宽度自适应父元素的宽度 200px 。
如果需要最大宽度自适应 float 元素的父元素宽度，则 float 元素宽度的 “首选最小宽度” 比父元素宽度小的前提下。
【注】首选最小宽度是指元素最合适的最小宽度。CSS 中，图片和文字的权重远大于布局，当 width: 0 ，此时所表现的宽度就是 “首选最小宽度” 。具体表现规则如下：
块状化并格式化上下文
元素设置 float 属性值不为 none，则其 display 计算值为 block / table 。则：
text-align 属性无法控制 float 元素的左右对齐，text-align 对块级元素无效display: block; float: left; 组合中，display: block 是多余的float: left; vertical-align: middle; 组合中，vertical-align: middle; 是多余的。【注】 vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
破坏文档流
没有任何 margin 合并
normal : 默认值。和 font-family 密切关联的变量值。不同系统不同浏览器的默认 line-height 都有差异，需要进行重置。
| 字体 | Chrome | Firefox | IE |
|---|---|---|---|
| 微软雅黑 | 1.32 | 1.321 | 1.32 |
| 宋体 | 1.141 | 1.142 | 1.141 |
数值 : 其最终计算值是和当前 font-size 相乘后的值。比如： line-height: 1.5
百分值 : 其最终计算值是和当前 font-size 相乘后的值。比如： line-height: 150%
长度值（带单位的数值） : 如 line-height: 21px 或者 line-height: 1.5em 等
vertical-align 起作用的前提条件是：只能应用于 内联元素 以及设置 display: inline / inline-block / inine-table / table-cell 的元素上。
vertical-align 计算值的正负）。x 字高： 指字母 x 的高度。即：基线（baseline）和主线（median line）之间的距离。
注：verticalalign: middle 与字母中线（median）不是一个意思，verticalalign: middle 指的是基线（baseline）往上 1/2 x-height 高度。
“内联元素” 的 “内联” 特指 “外在的盒子”，与 display 为 inline 的元素不是一个概念！
“内联元素” 的特征是：可以和文字在一行显示。文字、图片、按钮、输入框、下拉框等原生表单控件都是内联元素。
在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个 “空白节点” 一样。这个 “空白节点” 永远透明，不占据任何宽度。