前言
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
属性值：
none元素不浮动，默认值left元素向左浮动right元素向右浮动
浮动特性
- 浮动元素会脱离标准流
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性，任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性。（1.可以直接给高度和宽度，2.宽度根据内容的大小来决定）
- 浮动的元素是互相紧贴在一起的，不会有缝隙，如果父级盒子宽度装不下这些浮动盒子，多处的盒子会自动换行，另起一行对齐
浮动特性-脱标
- 脱离标准流的控制（浮）移动到指定位置（动），俗称脱标
- 浮动的盒子不再保留原先的位置
浮动元素搭配的标准流父元素
- 为了约束浮动元素位置，我们网页布局一般采取的策略是，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
- 一个元素浮动了，理论上其余的兄弟元素也要浮动
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
清除浮动的原因：
- 浮动元素的标尊流父元素有一个共同点，都是有高度的，但是有些情况下父盒子的高度是不能写死的，此时可以让子盒子撑开父盒子，有多少子盒子，父盒子就有多高
- 如果只是不给父元素设置高度，当子元素都浮动时，父元素的高度就会变成0，因为浮动的元素时不占有位置的，由于浮动元素不再占用原标准流的位置，所以会对后面的元素排版产生影响
- 由于父盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父盒子的高度为0时，就会影响下面的标准流盒子，所以我们需要清除浮动
清除浮动的本质：
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清楚浮动
- 清除浮动之后，父级就会根据浮动的子合租自动检测高度，父级有了高度，就不会影响下面的标准流了
- 清除浮动的策略就是闭合浮动
选择器{clear:属性值;}
clear的属性值:
left不允许左侧有浮动元素（清除左侧浮动的影响）right不允许右侧有浮动元素（清除右侧浮动的影响）both同时清除两侧浮动的影响- 实际开发中几乎只用
clear:both
清除浮动的方法：
- 额外标签法（隔墙法）是w3c推荐的做法
- 父级添加
overflow属性- 父级添加
:after伪元素- 父级添加双伪元素
1.清除浮动之额外标签法
- 额外标签法会在浮动元素末尾（最后一个浮动盒子）添加一个空的标签。例如
<div style="clear:both"></div>或者其他标签- 要求这个新的空标签，必须是块汲元素
2.清除浮动之父元素添加overflow
overflow属性值：
hiddenautoscroll- 缺点：无法显示溢出的部分
3.清除浮动之:after伪元素
:after方式是额外标签法的升级版，也是给父元素添加，添加clearfix类
.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;
}
