CSS围住浮动元素的三种方法

对CSS围住浮动元素的三种方法总结一下。

先给出总结性方法 - 围住浮动元素的三种方法：

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

• div元素
• 使用clearfix规则

问题的提出

代码：

    charset="utf-8">
   
   


   

 
        src="./码农.gif" />
       

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

   

 
        src="./码农.gif" />
       

It's fun to float.

        class="clear_me">

    
   

 Here is the footer element that runs across the bottom of the page.

 

样式：

• clearfix规则

 class="clearfix"> 
 src="images/rubber_duck.jpg"> 

It's fun to float.

 

样式：

.clearfix:after { 
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之前）唯一最可靠的方式。

读《》，收获不少，推荐之~~~~~~！