CSS中float的用法

<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>

<style>
section {border:1px solid blue; margin:0 0 10px 0;}
p {margin 0;}
footer {border:1px solid red;}
</style>

效果：

section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}

效果：



解决方法：

方法一：为父元素增加overflow：hidden 以强制它包围浮动元素

section {border:1px solid blue; margin:0 0 10px 0;  overflow:hidden;}
img {float:left;}
p {border:1px solid red;}

效果：



方法二：同时浮动父元素

section {border:1px solid blue;  float:left; width:100%;}
img {float:left;}
footer {border:1px solid red;  clear:left;}

浮动section后，不管其子元素是否浮动，它都会被紧紧的包围住，

因为现在section是浮动的所以footer想往上填充，为了强制footer依然待在section的下方给它应用 float:left