对CSS围住浮动元素的三种方法总结一下。
先给出总结性方法 - 围住浮动元素的三种方法

  • 第一个方法很简单,缺点是不太直观,即为父元素应用overflow:hidden,以强制它包围浮动元素。
  • 第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来。
  • 第三种添加非浮动的清除元素:第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。
    • div元素
    • 使用clearfix规则

问题的提出
代码:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Examples</title>
   <style>

   section {border:1px solid blue; margin:0 0 10px 0;}
   p {margin 0;}
   footer {border:1px solid red;}
   img {float:left;}
   </style>
</head>
<body>
   <section> 
       <img src="./码农.gif" />
       <p>It's fun to float.</p>
   </section> 
   <footer> Here is the footer element that runs across the bottom of the page.</footer> 
</body>
</html>

运行如下:
enter image description here

footer被提了上来,这不是我们想要的。这是因为section只包含非浮动元素了,它管不了浮动元素(图片),footer必然紧跟着section。但文字还是环绕着图片。
如何能让section包含浮动元素,从而让footer放在section(图片)下面呢?就是我们前面提到的三种方法。

第一种:给section的样式添加如下“overflow:hidden;”代码。

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

<body>
    <section class="clearfix"> 
        <img src="./码农.gif" />
        <p>It's fun to float.</p>
        <div class="clear_me"></div>
    </section> 
    <footer> Here is the footer element that runs across the bottom of the page.</footer> 
</body>

样式:

<style>
section {border:1px solid blue; margin:0 0 10px 0;}
p {margin 0;}
footer {border:1px solid red;}
img {float:left;}
.clear_me {clear:left;}
</style>

clearfix规则

<section class="clearfix"> 
<img src="images/rubber_duck.jpg"> 
<p>It's fun to float.</p> 
</section>

样式:

.clearfix:after { 
content:"."; 
display:block; 
height:0; 
visibility:hidden; 
clear:both; 
}

这个clearfix规则最早是由程序员Tony Aslett发明的,它只添加了一个清除的包含句点作为非浮动元素(必须得有内容,而句点是最小的内容)①。规则中的其他声明是为了确保这个伪元素没有高度,而且在页面上不可见。 使用clear:both意味着section中新增的子元素会清除左、右浮动元素(位于左、右浮动元素下方)。这里当然可以只用left,但both也适用于将来图片float:right的情况。

① after会在元素内容后面而不是元素后面插入一个伪元素。

以上几种方式,都能正确显示如下,当然,不同方式,是有其具体适用或不适用场景的。
enter image description here

浮动是实现多栏布局(在更多浏览器支持CSS3的Multi-column Layout Module之前)唯一最可靠的方式。

《CSS设计指南(第三版)》,收获不少,推荐之~~~~~~!