gif
1、支持动画
2、只有全透明和不透明两种模式
3、只有256种颜色
jpg
1、采用有损压缩算法
2、体积较小
3、不支持透明
4、不支持动画
png
1、采用无损压缩算法
2、体积较小
3、支持背景透明
4、不支持动画
5、2020-1-9 目前使用最多
svg
1、不会失真
2、记录颜色和形状，不适合记录照片。适用于图标
HTML中的图片
首先导入图片是默认平铺的
默认div布局是纵向排列的，如何设置横向排列呢？设置浮动float
但是使用浮动，之后的元素依然会填充到原来浮动的元素下方，所以要给浮动的元素设置一个统一的父元素，但是设置统一的父元素又会出现父级塌陷的问题，所以要解决父级塌陷
父级塌陷的方法
1、设置父级的行高和之前的浮动元素一致
2、父类设置 overflow:auto
3、clear ：left/right/both 清除浮动
浮动元素的重叠问题（浮动元素插入时只考虑他的上一个元素）
1、浮动元素不会覆盖文字
2、不会覆盖图片， 图片为特殊的文字内容
3、浮动元素不会覆盖表单内容