BFC:
什么是BFC:
- BFC的全称是block formatting context ;
- 每个渲染区域用 formatting context代表，它决定了其子元素如何定位，以及和其他元素的关系和互相作用；
- 在正常流中盒子要么属于块级格式化上下文，要么属于内联级格式化上下文。
常见BFC的产生：
- 根元素；
- float属性不为none；
- position为absolute或者fixed；
- display为inline-block，flex或者inline-flex；
- overflow不为visible。
BFC的特性：
- BFC内部的box会在垂直方向，一个接一个的放置；
- box垂直方向的距离由margin决定，属于一个 BFC的两个相邻的box会发生重叠，每个元素的margin box的左边与包含块border box的左边相接触（对于从左往右 的格式化如此，反之亦反），即时存在浮动也是如此；
- BFC 区域不会与float box重叠；
- BFC就是页面上独立的隔离容器，容器里的子元素不会影响到外面的元素，反之亦然；
- 计算BFC高度的时候，浮动元素也参加计算。
BFC的作用：
- 用于清除浮动，撑开父容器；
- 用于解决margin合并问题；
- 可用于实现两栏或者多栏布局。
IFC：
什么是IFC：
- IFC的全称是inline formatting context;
- IFC也是一种布局方式。
IFC的产生
- 块容器盒里只有行内元素时自动生成IFC。
边距合并问题：
出现外边距合并的场景：
- 未生成BFC与边框的情况下，父元素与子元素发生外边距合并，子元素的margin和父元素的margin重叠，导致margin小的一方被覆盖，达不到预期样式要求；
- 未生成BFC与边框的情况下，相邻的两个元素发生外边距合并，对于两个盒模型出现上盒的下margin与下盒上margin重叠，导致margin小的一方被覆盖，达不到预期样式要求；
- 未生成BFC和边框以及容器内没有其它元素的情况下，元素自己会上下margin合并，导致上下margin小的方被覆盖，达不到预期样式要求。
如何合并：
- 两个相邻的外边距都是正数时，合并结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，合并结果是两者绝对值的较大值。
- 两个外边距一正一负时，合并结果是两者的相加的和。
不让相邻元素外边距合并：
- 给相邻的两个元素设置边框，并设置为与背景色相同的颜色；
- 让两个元素生成BFC。
