如果一个元素具有 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 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个 “空白节点” 一样。这个 “空白节点” 永远透明，不占据任何宽度。
设置 display: flex 或者 display: inline-flex 的元素称为 Flex 容器，容器中的子元素称为 Flex 项目。
display: flex：保持元素块状特性，宽度默认 100%，不和内联元素一行显示。display： inline-flex：inline-flex 容器为 inline 特性，因此可以和图片文字一行显示。设置 display: grid 或者 display: inline-grid 的元素称为 Grid 容器，容器内部采用网格定位的子元素称为 Grid 项目。
display: grid：保持元素块状特性，宽度默认 100%，不和内联元素一行显示。display: inline-grid：inline-grid 容器为 inline 特性，因此可以和图片文字一行显示。display: subgrid：如果网格容器本身就是一个嵌套网格，可以使用该属性来表示从它的父节点取得它的行/列的大小，而不是指定它自己的大小。把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
height: 50px;
}
</style>