浮动(float)是CSS中一个重要的定位及布局属性,float
属性可以接受以下几个值:
-
none
:元素不浮动,默认值。 -
left
:将元素浮动到容器左侧。 -
right
:将元素浮动到容器右侧。 -
inherit
:元素继承其父元素的浮动方向。
注意:浮动的元素会自动添加display: block
。
什么是浮动
要理解什么是浮动,可以参考传统的印刷设计。在传统印刷布局中,可以设置图片被文字环绕。如下所示:
在传统页面布局软件(例如MS Word)中,文本框可以设置是否要文字环绕。如果忽略文字环绕,图片会被认为脱离了文本流,这时文字会穿过图片,好像图片并不存在。
在网页设计中,设置了浮动的元素就好像传统印刷布局中设置了文字环绕的图片。和绝对定位元素不同,浮动元素虽然脱离了正常的文档流,但并没有脱离文本流,意思是正常文档流中的块级元素会按照浮动元素不存在一样排列,但是文本并不会和浮动元素重叠。
与之相对,绝对定位元素完全脱离了页面的文档流和文本流,类似传统印刷中忽略文字环绕的情况。绝对定位的元素不会影响其他元素的位置也不会受其他元素的影响。下面是一个浮动前后对比的例子:
图 | 浮动前:
图 | 浮动后:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动布局
除了实现简单的文字环绕效果,浮动还能够用来做整个页面的布局,如下所示:
除此之外,相对于绝对定位元素,使用浮动元素可以使布局更加灵活,例如下面这个使用浮动布局的名片,当照片尺寸发生变化时,右侧的文字会自适应重新布局,不影响整体显示效果:
然而如果使用绝对定位的照片,虽然初始的显示效果是相同的,但是当照片尺寸变化时,文字就可能被遮挡,显然这种布局的灵活性并不好,如下所示:
清除浮动
说到浮动就不能不提它的兄弟属性clear
。clear
属性指定:一个元素是紧挨着前面的浮动元素,还是必须移动到它们的下面。CSS属性既可以用于浮动元素,也可以用于非浮动元素。
当应用于非浮动元素时,它将元素的边框边界移动到所有相关浮动元素外边界的下方,这时候外边距塌陷不起作用。
当应用于浮动元素时,它将元素的外边界移动到所有相关浮动元素外边界的下方。这会影响后面浮动元素的布局,后面的浮动元素的位置无法高于它之前的元素。
图 | 清除浮动前
上面这个例子中, sidebar浮动到了右侧,并且其长度小于正文容器。如果footer也设置了浮动,就可能出现如上图所示的情况。为了避免这种情况出现,需要用到清除浮动,使footer移动到所有浮动元素的下方。
图 | 清除浮动后
这里为footer设置的是clear: both
,clear
属性有四个可能的参数,最常用的就是both
,会清除两个方向的浮动。使用left
和 right
可以清除相应方向上的浮动。none
是默认值,inherit
表示该元素继承其父元素的clear
属性的值。
容器的塌陷问题
使用浮动时遇到的一个很棘手的问题是浮动对容器的影响。如果容器内除了浮动元素外没有其他元素,那么它的高度就会塌陷为0。如果父元素背景透明的话,这种塌陷并不容易被觉察到,如下所示:
如果想避免容器的塌陷,可以将容器浮动(形成块级格式上下文),或者在浮动元素和容器尾部之间设置清除浮动,后者可以通过伪元素 :after
实现:
#container:after {
content: "";
display: block;
clear: both;
}
清除浮动的技巧
在一些复杂的情况下,需要一些特别的方法来清除浮动。
-
使用空的DIV元素
顾名思义,就是在需要清除浮动的位置放置一个空的div。
<div style="clear:both;"></div>
设置overflow
通过为父元素设置overflow
为auto
或hidden
可以使父元素将浮动元素包含在内,避免了浮动元素对之后元素的影响。这个方法的原理也是形成了块级格式上下文。利用伪类
:after
利用伪类:after
可以实现清除浮动的目的,只需要为容器添加一个类,如"clearfix",然后定义如下css样式:
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both
}
举个例子说明,例如以下一组色块:
图 | 清除浮动前
如果想实现每一行一种颜色的效果,有两种策略:
为每种颜色的四个色块外套一层div,然后为div设置
overflow
为auto
或hidden
,或像上面提到的利用伪类:after
。在每种颜色的最后一个色块后面添加一个空的div,并为其设置
clear: both
。
最后的效果如下:
图 | 清除浮动后