浮动（CSS笔记)
1.浮动（float）
1.1 CSS布局的三种机制
网页布局核心—就是用CSS来摆放盒子
CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：
1.普通流（标准流）
块级元素独占一行，从上下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
常用元素：span、a、i、em等
2.浮动
让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示
3.定位
将盒子定在浏览器的某一个位置——CSS离不开定位，特别是后面的 js 特效
1.2为什么需要浮动？
1.如何让多个盒子(div)水平排列成一行？
2.如何实现盒子的左右对齐？
虽然学过行内块（inline-block）但是有缺点：
1.可以实现多个元素一行显示，但中间会有空白缝隙，不能满足第一个问题
2.不能实现盒子左右对齐
总结：
因为一些网页布局要求，标准流不能满足我们的需要了，因此需要浮动来完成网页布局
1.3什么是浮动(float)
概念：元素的浮动是指设置了浮动属性的元素会
1.脱离普通标准流的控制
2.移动到指定位置
作用
1.让多个盒子水平排列成一行，使得浮动成为布局的重要手段
2.实现盒子左右对齐
3.浮动最早用来控制图片，实现文字环绕图片的效果
语法
选择器 {float: 属性值;}
在一行显示，三个div都要设置浮动属性
注意： 浮动的元素互相贴靠在一起，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
1.4浮动(float)小结
浮动的核心目的——让多个块级盒子在同一行显示，常见的一种布局方式
1.5浮动(float)的应用(重要)
浮动和标准流的父盒子搭配
我们知道，副董事脱标的，会影响下面的标准流元素，我们就需要给浮动的元素添加一个标准流的父亲，这样，最大化减小了对其他标准流的影响
一个完整的网页是 标准流 + 浮动 + 定位
1.6浮动的扩展
1）浮动元素与父盒子的关系
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
2）浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
浮动的，那么当前盒子会与前一个盒子的顶部对齐
普通流，那么当前盒子会显示在前一个兄弟盒子的下面
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流
建议：一个盒子里面有多个子盒子，其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
2.清除浮动
2.1 为什么要清楚浮动
因为父级很多情况下，不方便给高度，但是子盒子浮动就不占位置，最后父级盒子高度为0，就会影响下面的标准流盒子
总结：
由于浮动元素不会占用原文档流的位置，所以它会对你后面的元素排版产生影响
准确来说不是清除浮动，而是清除浮动后造成的影响
2.2 清除浮动本质
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级会根据浮动子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
2.3 清除浮动的方法
语法：
选择器{clear:属性值;} clear 清除
实际开发中，几乎只用 clear:both;
- 额外标签法(隔墙法)
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
<div style=”clear:both”></div>，或则其他标签br等亦可。
优点：通俗易懂
缺点：添加许多无意义的标签，结构比较差
2）父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
优点：代码简洁
缺点：内容增多容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
3）使用after伪元素清除浮动
:after 方式为空元素额外标签的升级版，好处是不用单独加标签
使用方法：
.clearfix:after { content: ""; display: block; height: 0;
clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
优点：符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用zoom:1触发hasLayout
代表网站： 百度、淘宝、网易等
4）使用双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
代表网站：小米、腾讯等
2.4 清除浮动总结
什么时候使用清除浮动？
1.父级没高度
2.子盒子浮动了
3.影响下面布局了，就应该使用清除浮动
3.Photoshop 切图
常见图片格式：
1. jpg图像格式：
JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
2. gif图像格式：
GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果
3. png图像格式
是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
4. PSD图像格式
PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。
1）PS切片工具
PS切图片，两步操作：
1）用切片选择图片
利用切片工具手动滑出
图层菜单–新建基于图层的切片
利用辅助线来切图-- 基于参考线的切片
2）导出切片
文件菜单–存储为web设备所用格式–选择 我们要的图片格式–点存储–选中图片
辅助线和切片使用清除
视图菜单–清除辅助线/清除切片
下一篇： Poj 1113 Wall（凸包）