css 浅谈BFC的触发机制和css精灵图

BFC

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

强行翻译一下吧，简单来说，这句话的意思就是：

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素

怎么触发BFC

浮动元素：float 除 none 以外的值。

绝对定位元素：position (absolute、fixed)。

display 为 inline-block、table-cells、flex。

overflow 除了 visible 以外的值 (hidden、auto、scroll)。

精灵图

定义：

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。把一个网页所涉及到的所有零星图片都包含到一张大图中去，目前网页处理不大于200k的图片速度都差不多，这样做能大大提高页面加载图片的速度。

优缺点：

优点

1.减少网页的http请求，提高页面的性能

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

缺点

1.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

2.CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

3. 往常 CSS Sprites在开发的时候比较麻烦，你要通过或其他工具测量计算每一个背景单元的精确位置，但是如果是单图的话可以用一个CSS Sprite Generator这个网站进行单图拼接，能够很好的处理精确位置而且附带代码，减少不必要的繁琐。