浮动（float）
目标
记忆： 能说出css 的布局三种机制 理解:
能说出普通布局中的特点能说出我们为什么用浮动能说出我们为什么要清除浮动应用 4. 能够利用浮动完成导航栏案例 5. 能够清除浮动 6. 能够使用ps切图
css布局的三种机制 网页布局的核心——css摆放盒子
1 普通流（标准流） 块级元素会独占一行，从上向下顺序排列 常用元素有div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素按照顺序，从左到右顺序排列，碰到父元素变会自动换行： 常用元素：span、a、i、em等
2.浮动 为什么需要浮动？ 1.如何让div多个盒子排成一行？ 2.怎样实现盒子的左右对齐？
虽然行内块（inline-block）但是他也有自己的缺陷： 1.它可以实现多个元素一行显示，但中间余有空白缝隙，不能满足以上第一个问题 2. 它不能实现以上第二个问题，盒子左右对齐
遇到了左对齐和右对齐的，用浮动来做
什么是浮动 概念： 1.脱离标准普通流的控制 2.移动指定位置 作用、 1.让多个盒子（div）水平排成一行，使得浮动成为布局的重要手段 2.可以实现盒子左右对齐等等 3.浮动最早是用来控制图片，实现文字环绕图片效果。
float：left/right 元素向左向右浮动
浮动口诀之 浮 浮动的盒子脱离标准流，俗称“脱标”
浮动口诀之 漏
浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来的位置，是脱离标准流的，
浮动口诀之 “符” 浮动元素会改变display属性，类似转换为了行内块，但元素之间没有空白缝隙 浮动口诀之“特”
一个标准流+浮动 、 以后看到一排一排很整齐，用例来做合适 注意： 容易犯的错误是：建立父级的大盒子，是包含其他小盒子的，也就是说，里面上浮的小盒子，在父盒子的里面。 浮动一定要写到盒子样式的上边
建好盒子，插入图片时，图片的宽度，可以改成图片所在盒子位置的盒子一样宽度，高度不用改，也可以把图片宽度改为100%，意思是和盒子一样宽。
导航栏案例 注意：实际重要的导航栏中，我们不会直接用啊，而是用li，包含链接（li+a）的做法
li+a 语义更清晰，一看就是有条理的列表内容如果直接用a，搜索引擎容易辨别为有堆砌嫌疑（故意堆砌关键词容易被搜索引擎有降权的风险）从而影响网站的排名。以后重要的导航栏，都要采取li包含a的写法
浮动的扩展
浮动元素和父元素的关系 子盒子浮动是参照父盒子来对齐的，既不会超过盒子的边框，也不会超过盒子的内边距
浮动元素和兄弟元素的关系 浮动只会影响当前或者后边的标准流盒子，不会影响前面的标准流
两个盒子都浮动，那么当前盒子会与前一个盒子顶部对齐第一个盒子不浮动，第二个盒子浮动，不变了第一个盒子浮动，第二个盒子不浮动，第一个盒子压在第二个盒子上。清除浮动 父级在很多情况下，不方便给高，子盒子有多少内容，就显示多少内容，自动撑开父亲最为合理
**正常标准流盒子：**子盒子是标准流，父盒子虽然没有高度，但是会撑开父盒子高度 下面盒子会正常排列
子盒子浮动：
子盒子浮动，脱标，父亲没有高度就为0.不会被撑开盒子
清除浮动本质： 为了解决父级元素因为子级浮动引起内部高度为0的问题。
清除浮动的方法 clear：left/right/both（左/右/ 两侧）
1.额外标签法 通过在浮动元素加一个空标签 在最后一个浮动后边添加一个新标签如：
<div class="clear"></div>然后在样式里添加
<style> .clear { clear: both; } </style>优点： 通俗易懂，书写方便 **缺点：**增加了额外的标签
2.父级添加overflow属性方法
可以给父级添加：overflow为hidden/auto/scroll 都可以实现**优点：**代码简洁 **缺点：**内容多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素
3.使用after伪元素清除浮动
after方式相当于额外标签法的升级版，好处就是不用单独加标签 使用方法：
.clearfix:after { content: ""; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { *zoom: 1;/*ie67专门清除样式的*/ }这是最常见的写法
4.使用双伪元素清除浮动
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1;/*ie67专门清除样式的*/ }清除浮动什么时候 1.父级没高度 2.子盒子浮动了 3.影响下面布局，我们就应该清除浮动了
推荐使用后边几个
ps切图 千万别忘了选选中的切片
新建——基于图层的切片 视图——清除切片，可以清除所有切片 辅助线——基于参考线的切片
切图插件cutterman
