先给出总结性方法 - 围住浮动元素的三种方法：
- 第一个方法很简单，缺点是不太直观，即为父元素应用overflow:hidden，以强制它包围浮动元素。
- 第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来。
- 第三种添加非浮动的清除元素：第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。
- div元素
- 使用clearfix规则
问题的提出
代码：
It's fun to float.
Here is the footer element that runs across the bottom of the page.
运行如下：
footer被提了上来，这不是我们想要的。这是因为section只包含非浮动元素了，它管不了浮动元素（图片），footer必然紧跟着section。但文字还是环绕着图片。
如何能让section包含浮动元素，从而让footer放在section（图片）下面呢？就是我们前面提到的三种方法。
第一种：给section的样式添加如下红色加粗代码。
section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
第二种：浮动父元素，同时footer应用clear:left样式，强制清除左边的浮动影响，如下红色加粗代码。
section {border:1px solid blue; margin:0 0 10px 0; float:left; width:100%;}
footer {border:1px solid red; clear:left;}
注意：浮动非图片元素时，必须给它设定宽度，否则后果难以预料。
第三种：添加非浮动的清除元素
- 添加div
It's fun to float.
Here is the footer element that runs across the bottom of the page.
样式：
- clearfix规则
It's fun to float.
样式：
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
这个clearfix规则最早是由程序员Tony Aslett发明的，它只添加了一个清除的包含句点作为非浮动元素（必须得有内容，而句点是最小的内容）①。规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见。
使用clear:both意味着section中新增的子元素会清除左、右浮动元素（位于左、右浮动元素下方）。这里当然可以只用left，但both也适用于将来图片float:right的情况。
① after会在元素内容后面而不是元素后面插入一个伪元素。
以上几种方式，都能正确显示如下，当然，不同方式，是有其具体适用或不适用场景的。
浮动是实现多栏布局（在更多浏览器支持CSS3的Multi-column Layout Module之前）唯一最可靠的方式。
读《》，收获不少，推荐之~~~~~~！