理解CSS中的浮动

浮动（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。

最后的效果如下：

图 | 清除浮动后

清除浮动后

参考文献

[1] float
[2] clear
[3] CSS 浮动