开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情
13.清除浮动
- 清除浮动本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
选择器 { clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动影响 ） |
| right | 不允许右侧有浮动元素（清除右侧浮动影响） |
| both | 同时清除左右两侧浮动的影响 |
实际开发中，几乎只用clear：both
清除浮动的策略：闭合浮动
清除浮动的方法
- 额外标签法也称为隔墙法，是W3C推荐的做法。
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
a.额外标签法
额外标签法也称为隔墙法，是 W3C推荐的做法。
额外标签法会在浮动元素未尾添加一个空的标签。例如<div style=" clear:both”></ div>，或者其他标签(如< br />等)。
- 优点︰通俗易懂，书写方便
- 缺点︰添加许多无意义的标签，结构化较差
注意:要求这个新的空标签必须是块级元素。
b.父级添加overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto或 scroll 。
- 优点：代码简洁
- 缺点：溢出部分无法看见
c.after 伪元素法
：after 方式也是给父类添加
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom:1;
}
d.双伪元素清除浮动
.clearfix:before，
.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/*IE6、7专有*/
*zoom:1;
}
14.PS切图
### 14.1 常见的图片格式
0. jpg图像格式∶JPEG ( JPG )对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的 0. gif图像格式∶GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果 0. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式. 0. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说,最大的优点我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.
14.2 PS切图
- 图层导出
- 切片导出
- 插件
