CSS属性float详解

CSS浮动属性

CSS的float属性可以使一个元素脱离正常的文档流,然后被安放到它所在容器的的左端或者右端,并且其他的文本和行内元素环绕它。

浮动的本质

浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已。栗子

浮动的特性

1. 浮动的“包裹性”

所谓包裹性一目了然。block元素不指定width的话,默认是100%,一旦让该div浮动起来,立刻会像inline元素一样产生包裹性,宽度会跟随内容自适应。如下图(这也是通常float元素需要手动指定width的原因)

再加上一个div的话,效果如下:

效果非常近似于display:inline-block。但相比之下,浮动能设定为左浮和右浮,但display:inline-block都是从左到右排列的。(还有些细微差别,两个display:inline-block间会有空隙,但两个float间没有。)

2.浮动的“破坏性”

我们对上面的第一个图片栗子做下改动:将外层div2的float移到内层img中。这下高度欺骗性体现出来了。如下图

栗子中外层div没有了浮动,因此绿色边框宽度默认是100%全屏。其内容img由于加上了float,使得该img具有了欺骗性。float给img施了个障眼法,让该img的inline-height高度塌陷为0了。这样外层div计算高度时,认为img的高度为0,相当于div的content的高度为0,因此绿色边框看起来是一条直线。

但请注意障眼法毕竟是障眼法,并不是真的让img的高度塌陷为0了,可以看到img还是有正常高度的(见下图红框)。如果给div里加点文字,并设定300px的宽度,效果如下:

可以看到,外层div在没有手动设定height的前提下,其高度是由内部content的最大高度决定的,由于img的float使得img具有高度塌陷的欺骗性,让div误以为img的line-height为0,因此div的高度就是文字的匿名inline-box的inline-height。

清除浮动

这个相对比较简单了。用clear即可。稍微要注意的是,clear是仅作用于当前元素,例如元素A是浮动元素,靠左显示。元素B是block元素紧跟在A后面。此时要清除浮动,是在B上设clear:left。你在A上设clear:right是没有用的,因为A的右边没有浮动元素。

因为浮动元素的高度欺骗性,导致外层div2失去了高度(绿色边框成了一条线)。为了让div3显示到浮动元素下面,对页脚应用了clear:left。这是常规做法,没有任何新奇之处。但是div2的高度仍旧处于塌陷状态,然而我们真正期望的清除浮动后的样子并不是这样!

闭合浮动

更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。

先看一下清理浮动的各种方法:

1)添加额外标签

通过在浮动元素末尾添加一个空的标签例如

,其他标签br等亦可。

优点:通俗易懂,容易掌握

缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦,这是坚决不能忍受的,建议不要用。

2)父元素设置 overflow:hidden

通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1;

优点:不存在结构和语义化问题,代码量极少

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

3)父元素设置 overflow:auto 属性

同样IE6需要触发hasLayout

优点:不存在结构和语义化问题,代码量极少

缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等, 不建议使用

4)父元素也设置浮动

优点:不存在结构和语义化问题,代码量极少

缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用

5)父元素设置display:table

优点:结构语义化完全正确,代码量极少

缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用

6)使用:after 伪元素

需要注意的是 :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”。

由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

代码如下:

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

优点:结构和语义化完全正确,代码量居中

缺点:复用方式不当会造成代码量增加

From:jianshu.com

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注