外边距margin

开始学习css的时候觉得这个属性很简单，就是一个单纯的外边距，和内边距padding是差不多内容，只不过一个在内部，一个在外部而已。但随着学习的深入，发现了margin的一些特殊之处，才明白它与padding从来就不一样。

文档流（Normal flow）是什么？

要想了解margin的详细操作，首先需要知道HTML文档流（normal flow）到底是怎么一回事。HTML文档流是指HTML DOM元素在浏览器中如何显示排版的一种布局，这种布局方式依赖于BFC（Block Formatting Context）和IFC（Inline Formatting Context），即块级格式化上下文和行内格式化上下文。

BFC（块级格式化上下文）

• 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，是布局环境而不是单个元素的位置空间。
• 创建新的BFC的详细内容请查看MDN文档

block 元素：

• 水平方向与直接上级BFC内content宽度保持一致，垂直方向由height+boder+padding填充。
• 即: margin = box-sizing + margin-horizontal / margin-vertical
• margin-top过大会使得父容器溢出，但如果父容器有border-top或padding-top则不会溢出。
• margin- left设为负值，会向左移动该元素。
• 当前元素一定会占据100%的BFC宽度，所以如果设置margin-left和margin-right不能填满，则margin-right的设置不生效，会自动计算。
• 当margin-right为负值的时候，如果想让元素移动，需要设置margin-left:auto;

inline 元素：

• 由文本长度决定
• 垂直方向为line-height高度填充
• margin只能自动计算，所有设置均不生效