<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