BFC

BFC

BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用 当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。 也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干

怎样才能形成BFC

1. float的值不能为none
2. overflow的值不能为visible
3. display的值为table-cell, table-caption, inline-block中的任何一个
4. position的值不为relative和static

图片格式

SVG（无损压缩、支持动画）

1、矢量图形，文件比较小，同时也能提供高清晰的画面，适合于直接打印或输出；

2、图像文件可读，易于修改和编辑；

3、可以方便的创建文字索引，从而实现基于内容的图像搜索；

4、可以用来动态生成图形。也可以与现有技术可以互动融合。

JPEG（有损/无损）

1、支持渐进传输，传输过程中图片从模糊到清晰；

2、支援高动态范围成像、支援图片透明度。

GIF （无损压缩、支持动画、8位压缩最多处理256种颜色）

1、优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小； 
2、可插入多帧，从而实现动画效果； 
3、可设置透明色以产生对象浮现于背景之上的效果。

PNG（无损压缩）

1、分为8位，24位，32位。其中PNG24不支持透明；
2、渐进显示和流式读写； 

3、保留图像名称、作者、版权、创作时间。