很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。应该叫闭合浮动。清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。
浮动元素会导致它脱离文档流，致使父元素也看不到它，因而也不会包围它。
先举个栗子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title</title> <style type="text/css"> section {border:1px solid blue; margin:0 0 10px 0;} p {margin 0;} footer {border:1px solid red;} </style> </head> <body> <section> <img src="timg.jpg" alt="我是图片" /> <p>这是文本文档需要它定在图片右边</p> </section> <footer> 这是最下面的footer元素也是经常网站布局所涉及到的，上面的内容浮动后会导致它发生变化</footer> </body> </html>
上面代码显示的页面是这样的
假设我们想要图片下面的文字定在图片的右侧。那么添加样式img {float:left;}让图片左浮动。可是这么做的结果是这样的。。。。
妈呀！标题倒是跑到右边了，可 section 也不再包围浮动元素了，它只包围非浮动的元素。于是， footer 被提了上来，紧挨着前一个块级元素—— section 。这样是没错儿，可结果呢，不是我们想要的。
下面就是一些简单的解决办法：
1.为父元素添加 overflow:hidden
这个办法很简单，但是缺点是不太直观，实际上， overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大，超出的部分会被剪切掉。除此之外， overflow:hidden 还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。
2.同时浮动父元素
第二种促使父元素包围其浮动子元素的方法，是让父元素也浮动起来，（要嗨一起嗨才行），浮动 section 以后，不管其子元素是否浮动，它都会紧紧地包围（也称收缩包裹）住它的子元素。因此，需要用 100% 再让 section 与浏览器容器同宽。另外，由于 section 现在也浮动了，所以 footer 会努力往上挤到它旁边去。为了强制 footer依然呆在 section 下方，要给它应用 clear:left 。被清除的元素不会被提升到浮动元素的旁边。
3.添加非浮动的清除元素
第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。
（1）第一种方式不太理想，也就是简单地在 HTML 标记中添加一个子元素，并给它应用clear 属性。由于没有默认的样式，不会引入多余空间， div 元素很适合这个目的。例如添加：<div class="clear_me"></div> 然后添加样式.clear_me {clear:left;}。如果你特别不想添加这个纯表现性元素，我再告诉你一个用 CSS 来添加这个清除元素的方法。
（2）给section 添加一个类，例如案例中<section class="clearfix">，然后再给一个clearfix规则。
.clearfix:after {content:".";display:block;height:0;visibility:hidden;clear:both;}这个 clearfix规则最早是由程序员 Tony Aslett 发明的，它只添加了一个清除的包含句点作为非浮动元素（必须得有内容，而句点是最小的内容）规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见。使用 clear:both 意味着 section 中新增的子元素会清除左、右浮动元素从而位于左、右浮动元素下方。
这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应用overflow:hidden ，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部，而这恰恰是 overflow:hidden 所要阻止的。再比如，不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中。
当然这三种方法最后的结果都是这样的：
