CSS基础(四)-BFC&边距合并
1. BFC 是什么？如何生成 BFC？BFC 有什么作用？
1.1 BFC的概念
全称Block Formatting Context，块级格式化上下文， 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
1.2 生成BFC
（1）根元素
html里的根元素产生相应的“块级格式化上下文”这类的规则，如某些规则：块级容器可以充满父容器，父容器可以被子元素撑开，外边距产生合并，渲染顺序是从上到下
（2）float属性不为none；
如float:left; 该元素属性本身也产生了相应的块级格式化上下文。该元素产生的BFC与所在的根元素的BFC互不影响，此元素的作用域，则为该元素服务，与根元素产生一个隐形的边界
（3）position为absolute或fixed；
（4）display为inline-block, flex, table-cell, 或inline-flex；
（5）overflow不为visible；
1.3 BFC的作用
- BFC 会阻止外边距折叠
两个相连的 div 在垂直上的外边距会发生叠加,可以通过设置BFC来阻止外边距折叠例如设置为overflow:hidden。
先看如图代码：
因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 50px，而不是 100px。
如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。 如下代码：
这时候，两个盒子边距就变成了 200px。
- BFC 可以包含浮动的元素
使用overflow: hidden或overflow: auto触发浮动元素的父元素的 BFC 特性，从而可以包含浮动元素，实现清除浮动。
例如：
由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。
若触发浮动元素的父元素的 BFC 特性，则容器将会包裹浮动元素：
- BFC 可以阻止元素被浮动元素覆盖
浮动元素会脱离文档流，浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，可以为该兄弟元素设置 BFC 后可以阻止这种情况的发生。
第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 。
如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：
ps: 该方法可以用以实现两列自适应布局。
2. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
2.1场景
- 相邻元素之间
- 毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。
- 父元素与其第一个或最后一个子元素之间
- 如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。
- 空的块级元素
- 如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。
2.2 如何合并
两个相邻的外边距都是正数时，合并取它们两者之间较大的值。
两个相邻的外边距都是负数时，合并取两者绝对值的较大值。
两个外边距一正一负时，合并取两者相加的和。
2.3 如何不让相邻元素外边距合并：
设置border或padding使外边框隔离。
设置父元素overflow属性取值为除visiable外的其他值，构建BFC区域进行隔离，该元素和它的子元素之间的margin不会被折叠。
设置浮动元素(float:left/right)，不与任何元素的外边距合并。
设置绝对定位元素（position:absolute），不与任何元素的外边距合并。
设置display:inline-block的元素，不与任何元素的外边距合并。
风景列表在线demo：图片列表