浮动的消除

当divOuter内有一个divInner，divInner如果设置了浮动后，divOuter的大小会变得不受divInner影响，此刻就需要消除divInner的浮动效果

方法：

给divOuter设置overflow: hidden

overflow: hidden; 是指溢出部份隐藏，但却能清除浮动。

给divOuter设置高度

这需要在知道divInner高度的情况下

使用clear属性

clear是让自己在布局的时候无视周围(left/right/both)元素的浮动效果。
在上面案例的divInner旁边加一个空div，无内容，设置clear: left; 则该div会无视自身左边的元素的浮动效果进行布局。那么因为div的特性会自动换行，所以该div会去到了下一行，但因为其内容是空的，所以高度是0，那么此时divOuter的高度会因为空div不是浮动的，那么就会变成divInner的高度再加上空div的高度（0px），也就消除了浮动。

.divInner {
  float: left;
  background: #654321;
  padding: 20px;
}

<div class="divOuter">
  <div class="divInner">divInner</div>
  <div style="clear: left;"></div>
</div>

使用伪类设置clear

该方法跟上面的clear: left;一致，只不过不是手动添加div，而是使用伪类添加。

.divInner {
  float: left;
  background: #654321;
  padding: 20px;
}

.clearFloat:after{
  content: "";
  display: block;
  height: 0;
  clear: left;
}

<div class="divOuter clearFloat">
  <div class="divInner">divInner</div>
</div>

这样，只要加了clearFloat这个class，他的子元素末尾就会自动添加一个clear: left;的空的div

上面的方案对现代浏览器是可行的。但如果要兼容IE6、7的话，那就应该使用hasLayout的方式了，这里不做讲解。