十六、浮动的注意点
1.浮动布局注意点
1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
* {
margin: 0;
padding: 0;
}
.top {
height: 50px;
background-color: gray;
}
.banner{
width: 980px;
height: 150px;
margin: 10px auto;
background-color: red;
}
.box {
width: 980px;
height: 300px;
margin: 0 auto;
background-color: pink;
}
.box ul li {
float: left;
list-style: none;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
****只要是通栏的盒子（和浏览器一样宽）,不需要指定宽度****
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
2.为什么需要清除浮动?
原因：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
清除浮动本质
1.清除浮动的本质是清除浮动元素造成的影响
2.如果父盒子本身有高度，则不需要清除浮动
3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动
选择器 {clear:属性值}
left：不允许左浮动
right：不允许右浮动
both：同时清除左右两侧浮动
清除浮动的策略是：闭合浮动
3.清除浮动方法
1.额外标签法：额外标签法会在浮动元素末尾添加一个空的标签。例如<divstyle=”clear:both”>，或者其他标签(如
等)。
注意：新的标签必须是块元素
优点:通俗易懂，书写方便
缺点:添加许多无章义的标签，结构化较差
2.给父级元素添加overflow
3.:after伪元素法
优点:没有增加标签，结构更简单
缺点:照顾低版本浏览器
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
IE6、7专有
zoom: 1;
}
4.双伪元素清除浮动
优点:代码更简洁
缺点:照顾低版本浏览器
代表网站:小米、腾讯等
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix{
zoom: 1;
}
.box {
width: 500px;
background-color: pink;
border-color: black;
border-style: solid;
****或添加 overflow: hidden; ****
}
.dama {
width: 140px;
background-color: red;
height: 200px;
float: left;
}
.ermao {
width: 240px;
background-color: blue;
height: 200px;
float: left;
}
.clear {
clear: both;
}
十七、常见的图片格式及ps切图
常见图片格式：
1.jpg图像格式:JPEG(JPG )对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
2.gif图像格式:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果实际经常用于一些图片小动画效果
3.png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明图片,请选择png格式.
4.PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮置等多种设计稿.对我们4前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.
PS切图：
PS 有很多的切图方式:图层切图、切片切图、PS插件切图等
1.图层切图：最简单的切图方式:右击图层快速导出为PNG、
但是很多情况下,我们需要合并图层再导出:
a. 选中需要的图: 图层菜单→合并图层(ctrl+e)
b.右击快速导出为 PNG
2. 切片切图
a.利用切片选中图片 利用切片工具手动划出
b.导出选中的图片 文件菜单 导出 存储为 web 设备所用格式选择我们要的图片格式存储
3.PS插件切图
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工导出 web 所用格式”以及使用切片工具行挨个切图的繁琐流程
