BFC&边距合并&浏览器兼容(10)

饥人谷学习第10天

BFC

• Block Formatting Context
• 每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
• 在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文

BFC产生

1.根元素；
2.float属性不为none；
3.position为absolute或fixed；
4.display为inline-block，flex或者inline-flex；
5.overflow不为visible。

特性：

• 内部的Box会在垂直方向，一个接一个地放置；
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参加计算。

作用：

1.margin合并
2.contain float 把浮动给包裹住

内联格式化上下文IFC

IFC也是一种布局规则
块容器盒里面只有行级元素的时候，自动生成IFC
一般用不到

边距合并

• 合并场景
  1.相邻元素合并
  2.父子合并
  3.自己合并（一般体现为自己没有内容设置了margin之后上下margin合并）

• 取消合并
  1.加边框、padding
  2.生成BFC
  相当于生成了一条边界，如果以边框作为边界，父子之间冲破不了边界所以不会合并；但对相邻元素，margin不属于边界同样会产生合并。
  对于相邻元素，如果为浮动元素，则边距不合并，不是浮动元素最好不要管边界问题，直接写想要的margin（边距合并是取两个margin最大值的）。

浏览器兼容问题

什么是浏览器兼容问题

同一份代码，有的浏览器效果正常，有的不正常

• 不正常的原因？》不支持 or Bug？
• 如何让浏览器展示正常？》条件注释 or 单独Hack？

为什么会有浏览器兼容问题

• 同一产品，版本越老 bug 越多
• 同一产品，版本越新，功能越多
• 不同产品，不同标准，不同实现方式

渐进增强盒优雅降级

• 渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验；
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

处理兼容问题的手段

• 合理的框架
  1.Bootstrap（>=ie8）
  2.jQuery 1.~(>=ie6) 2.~(>=ie9)
  3.Vue（>=ie9）
  4.···
• 条件注释（全称：ie条件注释）
  于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<!--[endif]-->

使用了条件注释的页面Windows Internet Explorer 9中可正常工作，但在Internet Explorer 10中无法正常工作。IE10不再支持条件注释。

• CSS hack