谈一谈float

float浮动，我们会常常用于我们的css布局中，提到浮动的行为，我们不得不提及一下BFC，在普通流（normal flow）中所有的盒子会参与一种格式上下文，这个盒子可能是块盒也可能是行内盒，块盒参与的是块级格式化上下文（Block Formatting Context），也就是我们所说的BFC；行内盒参与的是行内级格式化上下文（Inline Formatting Context.），也就是我们所说的IFC。我们所说的float，浮动的元素就是脱离我们的normal flow，生成了新的bfc。生成bfc的规则大概有4种：
1. float不为none
2. overflow不为visible
3. postion值为static,absolute
4. display值为table-cell,inline-display等
下面我们看一下浮动的几种行为：

// 本文dom结构
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
// 常规样式
.test1, .test2, .test3{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.test1{
    background: red;
}
.test2{
    background: green;
}
.test3{
    background: yellow;
}

我们对3个div进行float: left;，形成了三个新的bfc，三个新的bfc会从左到右的显示，结果就是这样的：

这个我们很好理解，但是我们只对第一个div进行浮动时，并且给第二个div添加某些文字，那么可以看我们的结果：
（图一）我们可以观察到，框1覆盖住了框2，这个原因又是为什么呢？
在bfc中，每个盒子的左侧紧贴包含块的左侧，浮动也是如此，我们的框2就是紧贴这父元素也就是body的左侧，框2的内容盒被由框1生成的bfc全部占据了，所以我们看到的是框2的的内容溢出了。当我们给框2添加一个overflow: hidden;属性时，我们又会产生什么样的效果呢？

我们可以看到对框2添加overflow:hidden;之后，我们的框2也形成了bfc，这样框2将不会紧贴父元素的左上角，而是去占浮动之外的空间。
float与postion: absolute;的区别：
两个同样都是生成新的bfc，但是又有一些不同，我们对框1进行float:left;时会出现的效果是图一这样，但是我们要是对框1进行绝对定位的话，我们的结果却是我们的框2的完全被覆盖了，文字也不会溢出，从这里我们就可以看出这两者的区别，绝对定位之后的元素脱离普通流，但是同时z-index也提高了一个层级，它与普通流的元素不处于一个层级成，而浮动后的元素可以理解为我们的普通流中的元素会无视它，但是它还是会占位的，只是占据的是我们普通流中被其覆盖的盒子的空间，正如我们图一的那种情况，所以从这点来看的话，我们的浮动与绝对定位的区别还是蛮大的。
清除浮动：
由于浮动会造成父元素塌陷，所以我们经常会用到清除浮动：

// dom结构
<div class="parent">
    <div class="test"></div>
</div>
// css样式
.test{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}
.parent{
    width: 100px;
    border: 1px solid #000;
}

可以发现我们的父元素高度发生了塌陷，产生的原因也是很简单，那就是子元素由于浮动脱离了普通流，为了解决这个问题，我们可以有以下的解决方法：
1. 为父元素添加一个伪元素，并且对其应用clear:

.parent:after{
    content: "";
    display: block;
    clear: both;
}

1. 对父元素添加相应属性，使其形成新的bfc，但是为什么说形成了新的bfc就可以使父元素的高度回到未浮动时的高度？一个比较好的解释那就是bfc是为了方便计算布局提出来的规则，也就是说bfc就是一个计算区域，假如我们没有指定height的话，我们bfc的高度，就是我们整个子元素的高度：

.parent{
    width: 100px;
    border: 1px solid #000;
    overflow: hidden;
}