浮动float的重点

定义：

浮动是元素脱离标准流的控制移动到指定位置（脱标）

浮动的作用

1. 使块级元素排列在一行

块级元素独占一行，而浮动可以实现块级元素排列在一行，且浮动的元素彼此之间没有缝隙，超出父级元素宽度的元素会另起一行

2. 实现行文字环绕图片

3. 设置子元素浮动的行内元素可以设置宽高

清除浮动（解决浮动元素塌陷问题）

即解决父元素因子元素浮动引起的内部高度为0

1. 给父元素添加高度

2. 额外标签法

给父元素创建一个div子元素，并给该div添加属性clear：both；

<div class="father">
    <div class="one"></div>
    <div class="new"></div>
</div>
<style>
.new{
    clear:both;
}
</style>

3. overflow:hidden

给父级元素添加属性overflow:hidden;（内容过多时造成内容隐藏而不是换行）

4. 父元素调用after伪元素选择器

.clearfix:after {
    content:"";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1; //*ie6.7专门清除福鼎的样式
}

5. 父元素调用双伪元素选择器

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}