浮动页面布局的那些事儿

2015-09-20

浮动是css中的定位模型之一,css属性名为float,其中有三个值(初始值为none):

  • left 在包含框内向左浮动
  • right 在包含框内向右浮动
  • none 用于防止元素浮动

采用浮动布局的元素将会从正常文档流中删除,虽然它不在正常文档流中,但它还会影响正常流中的布局,是不是有点霸道?那是因为,浮动布局的本身作用是使文本能够环绕图片显示,只要元素设置了向左或向右的float属性,那么它周围的内容都会向它靠拢,注意是内容,元素的框还是无视它的,文本元素的边框不受浮动的影响,还是从正常文档流的左上角开始布局。

如图:


那么,如何消除这种效果,并且浮动块可以保持浮动呢?那就需要用到clear属性了,其中有主要有这三个值:

  • left 清除元素左边的浮动
  • right 清除元素右边的浮动
  • both 清除元素两边的浮动

上一个例子,当将内容元素增加clear:left属性,就会出现这样的效果:

当然使用clear:both 效果一样。如果是右浮动那就使用clear:right

下面一种情况,当包含块中两个元素都设置了浮动属性。

此时就会出现包含框Height值没有了,图中的高度是包含框Padding的值。这是因为当包含框中两个元素都设置了浮动属性,正常文档流中没有元素了,自然包含框就“瘪了”。这种情况也可以通过clear清除来修复这种情况,但是此时包含框中的两个元素都是浮动元素,肯定是本能清除它俩的,所以只能添加一个元素来进行清除。例如在包含框的最后增加

html:

1
<br class="clear"/>

css:

1
.clear{ clear:both; }

然后,就正常了:

然而,这种方法并不好,每次清除都需要增加一个额外的标记。下面是更好的方法:
IE下清除浮使元素haslayout就可以了,如宽度值,高度值,绝对定位,zoom,浮动本身都可以让元素haslayout。显然,首选zoom:1;不会干扰任何样式。非IE浏览器常用的是overflow属性,overflow:hidden;
所以兼容的做法是:

1
.clear{overflow:hidden; zoom:1;}

小结,浮动定位用处非常的大,但是有时不是太好控制,所以当使用浮动的时候,要知道清除浮动的作用,让浮动之外的布局不受浮动影响。