浮动

定位概述
定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素相对浏览器窗口本身的位置
普通流定位
浮动定位
相对定位
绝对定位
固定定位

普通流定位
页面中的块级元素框从上到下一个接一个地排列
    每一个块级元素都会出现在一个新行中（如：div、p等）
    元素框之间的垂直距离是由框的垂直外边距计算出来的
内联元素将在一行中从左到右排列水平布置
    不需要从新行开始
    可以使用水平内边距、边框和外边距调整它们之间的距离
浮动定位
浮动定位是指
    将元素排除在普通流之外，即元素将脱离标准文档流
    元素将不在页面占用空间，文字占空间
    将浮动元素放置在包含框的左边或者右边
    浮动元素依旧位于包含框之间
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
    经常使用它来实现特殊的定位效果

包含框中有三个元素框，如果把框1向右浮动，则他会脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

浮动定位（续1）
当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘
因为框1不再处于文档流中，所以它不占空间，实际上覆盖了框2，使框2从视图中消失

浮动定位（续2）
如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前面一个浮动框：三个框在同一行上显示

浮动定位（续3）
如果包含框太窄，那么其他浮动块会自动向下移动，直到有足够的空间
如果浮动元素的高度不同，那么当它们向下移动时可能被其他浮动元素“卡主”（如图右）

浮动定位（续4
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
float属性
如果需要设置框浮动在包含框的左边或者右边，可以通过float属性来实现
float属性定义元素在哪个方向浮动
    在CSS中，任何元素都可以浮动
float：none/left/right

clear属性
clear属性用于清除浮动所带来的影响
clear：none/left/rigth/both;用于受浮动影响的元素
    定义了元素的哪边上不允许出现浮动元素

清除浮动
2.给父元素，加height，父元素不能浮动
3.overflow：hidden;    父元素不能浮动
有高度（height），溢出隐藏
没有高度，自动增高
浮动定位
float与overflow
包含框内的元素被应用了float之后，包含框的高度会发生变化

float与overflow（续1）