浮动原理及清除浮动

上节回顾

  在上节的《Web前端入门学习(4)—— 块级元素和行内元素之特征与转换》中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换。加上display属性,可以指定元素的类型,如display:block、display:inline,以及display:inline-block。当然用得最多的是最后一个display:inline-block。结合例子来看:

例1:





无标题文档



    
div1
    
div2
    span1     span2

显示结果:

Web前端入门学习(5)——浮动原理及清除浮动_第1张图片

例2,如果在css样式中加上display:inline-block,即把CSS样式改成:

div,span{
    height:100px;
    width:100px;
    background:blue;
    border:1px solid red;
    display:inline-block;
}

显示效果将会变成:

Web前端入门学习(5)——浮动原理及清除浮动_第2张图片

C_0020.gif从上面的对比结果可以看出,属性display:inline-block的效果是,可以把块级元素在同一行内显示,而行内元素也变得支持宽高。但是使用这种方式,也有一些隐患问题,就是换行被解析。也就是说,标签之间换行之后,显示出来的效果中间是存在间隙的,并且不同浏览器之间的间隙大小不一致。此外,IE6、IE7是不支持块级元素的inline-block效果。那么有其他办法可以解决吗?这就是本节需要讨论的问题了。


浮动原理

  任何元素都可以被浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框位置;由于浮动框不在文档流中,所以文档流中的元素会表现得就像浮动框不存在一样。文档流是文档中可显示对象在排列时所占用的位置。话不多说,看例子最直观:

例3:





无标题文档



    div1
    div2