那么，问题就出现了，标题是跑到右边了，但是父元素不再包围浮动元素了，它只包围非浮动的元素。于是，.footer被提了上来，紧挨着前一个块级元素。显然这种效果不是我们想要的。
那么想要的效果是怎么样的呢？如下图就是：
接下来我们就来看一下有哪些方法可以达到这样的效果（清浮的方法）。
方法一，为父元素应用overflow:hidden这个很常用，只需要在父元素上加一个属性overflow:hidden。
.parent{overflow:hidden}
注明：这个属性声明的真正用途是防止包含元素被超大内容撑大。除此之外，overflow：hidden 还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。
方法二，浮动父元素第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来与浏览器容器同宽。同时为了不让.footer元素不往上挤，需要加一个清浮属性clear:left。如下代码所示：
.parent{float:left;width:100%}
.footer{clear:left}
方法三，在父元素内容的末尾添加非浮动元素，可以直接在标记中，也可以通过父元素添加clearfix类来加给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方。如下所示：
样式代码这样搞：
.clear_me{clear:left}
当然，避免多一个dom元素，可以借助伪类来实现，父元素添加一个类clearfix。设置如下代码：
这么搞也能达到我们想要的效果。
最后总结一下：
从浮动的作用说到为什么要清浮，最后重点说了清溪的三个方法，这三种方法的使用要根据实际的场景来选择，比如，不能在下拉菜单的顶级元素上应用overflow:hidden。否则作为其子元素的下拉菜单就不会显示了。总之，掌握了这三种技术之后，再碰到需要包围浮动的元素的情况。你就能够游刃有余了。
