大话浮动

一、浮动

浮动

左一float:left，问题：现代浏览器中无法把wrap撑高
左二float:left
我是内联元素，我的位置受到浮动的影响
我是块级元素，我的位置没有受到浮动的影响
结果: 内联元素受到浮动的影响。块级元素位置没有受到浮动的影响，但是存在wrap高度塌陷的问题。

二、闭合浮动 与 清除浮动 的区别

清除浮动

左一float:left，问题：现代浏览器中无法把wrap撑高
左二float:left
我是块级元素 clear:both 清除浮动,
虽然位置正确了,但是 wrap 的高度没变
结果: 通过在footer上设置clear：both，清除浮动，footer位置正确，但是并不能解决wrap高度塌陷的问题。

闭合浮动

左一float:left后，自己闭合浮动了，所以footer不用再清除浮动了
左二float:left
div2：这次 通过在wrap添加 .clearfix ，通过.clearfix:after已经 闭合浮动
结果: 通过在wrap添加 .clearfix ，通过.clearfix:after已经闭合浮动，不再出现wrap高度塌陷的问题。

三、闭合浮动的各种方法

1）添加额外标签

左一float:left，添加空的div标签来清除浮动
左二float:left
浮动过后的footer块级框
结果: 通过添加额外标签清除浮动，布局排列正常

2）使用 br标签和其自身的 html属性

左一float:left，使用 br标签和其自身的 html属性
左二float:left

浮动过后的footer块级框
结果: 通过添加br元素，并设置clear：all，可以清除浮动，布局排列正常

3）父元素设置 overflow：hidden

左一float:left，父元素设置 overflow：hidden来清除浮动
左二float:left
浮动过后的footer块级框
结果: 通过给父元素添加overflow：hidden属性，可以清除浮动，布局排列正常

4）父元素设置 overflow：auto 属性

左一float:left，父元素设置 overflow：auto来清除浮动
左二float:left
浮动过后的footer块级框
结果: 通过给父元素添加overflow：auto属性，可以清除浮动，布局排列正常

6）父元素设置display:table

左一float:left，父元素设置 display:table来清除浮动
左二float:left
浮动过后的footer块级框
结果: 通过给父元素添加display:table属性，可以清除浮动，布局排列正常

四、闭合浮动方法优化

.main {
      float:left;
      }
.clearfix-1:after {
          content: ".";
          display: block;
          height: 0;
          visibility:hidden;
          clear: both;
          }
      .clearfix-1 { *zoom: 1; } /* IE < 8 */
.box{ margin:50px auto;} 
.main {
      float:left;
      }
未添加:before伪元素,由于内部的.main float:left 创建了BFC,垂直边距发生叠加,变为100px 
.main {
float:left;
}
.side{margin-top:100px;} 添加了.clearfix-3:before之后,和上一个元素之间垂直距离为:50px