父元素包围其浮动的子程序有三种方式：
以下面的HTML为例
<section>
<img src="images/rubber_duck2.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.</footer>
CSS：
section{border:1px solid;margin:0 0 10px 0;}
footer{border:1px solid red;}
添加浮动：
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
我们想让footer在下面，方法如下：
一、父元素添加：overflow：hidden，以强制它包围浮动的子元素。
section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
img {float:left;}
p {border:1px solid red;}
给容器添加overflow：hidden声明后，section又包含了带float的img。
实际上，overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用
overflow:hidden之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容
器剪切掉。除此之外，overflow:hidden还有另一个作用，即它能可靠地迫使父元素
包含其浮动的子元素。
二、同时浮动父元素
section {border:1px solid blue; float:left; width:100%;}
img {float:left;}
footer {border:1px solid red; clear:left;}
浮动 section以后，不管其子元素是否浮动，它都会紧紧地包围（也称收缩包裹）住
它的子元素。因此，需要用width：100%来使其与浏览器同宽。为了强制 footer还
呆在下方，要用clear：left清除浮动。
三、添加非浮动的清除元素
由于父元素一定会包含非浮动的子元素，因此在最后添加一个清除元素，使父元素能够
包含浮动的排在中间的子元素。
<section>
<img src=...>
<p>...</p>
<div class="clear_me"></div>
</section>
<footer>...</footer>
CSS:
.clear_me(clear:left)
或者浮动元素CSS：
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}