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

4150阅读 0评论2013-03-09 2gua
分类:Html/Css

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

问题的提出
代码:



    charset="utf-8">
   </span><span style="line-height:normal;background-color:#FFFFFF;">Examples</span><span style="line-height:normal;color:#062873;font-weight:bold;">
   


   
 
        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 bluemargin:0 0 10px 0; overflow:hidden;}

第二种:浮动父元素,同时footer应用clear:left样式,强制清除左边的浮动影响,如下红色加粗代码
section {border:1px solid bluemargin:0 0 10px 0; float:left; width:100%;}
footer {border:1px solid red; clear:left;}
注意:浮动非图片元素时,必须给它设定宽度,否则后果难以预料。

第三种:添加非浮动的清除元素

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

It's fun to float.


        class="clear_me">

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

样式:

 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之前)唯一最可靠的方式。

读《》,收获不少,推荐之~~~~~~!

上一篇:CSS设计指南(第三版)学习笔记 - 选择符汇总
下一篇:最近想看的书