IT兄弟连 HTML5教程 使用盒子模型的浮动布局

虽然使用绝对定位可以实现页面布局，但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变，所以并不是布局的首选方式。而使用浮动的盒子模型可以向左或向右移动，直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止。并且由于浮动的盒子模型不在文档的普通流中，所以文档的普通流中的盒子模型表现得就像浮动的盒子模型不存在一样。

1  设置浮动

在CSS中，我们通过float属性实现盒子区块框向左或向右浮动。其实任何元素都可以浮动，而浮动元素会生成一个块级框，而不论它本身是何种元素。但浮动的元素要指定一个明确的宽度，否则它们会尽可能地窄。

在图1所示的两张图片中，左边图片是按普通的文档流布局的三个盒子区块框，它们从上到下一个接一个地排列，位置由元素在HTML中的位置决定。而在右边的图片中，当把第一个区块框向右浮动时，它脱离普通文档流并且向右移动，直到它的右边缘碰到包含框的右边缘，而其他两个区块框就会在普通流中上移。

图1  CSS浮动属性的应用

另外，在图2.4所示的两张图片中，当将第一个区块框设置向左浮动时，它就会脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。这样，第一个区块框就不再处于文档流中，所以它也不占据空间，则第二个区块框就会在文档流中自动上移，但被设置左浮动的第一个区块框覆盖住了，从而使第二个区块框从视图中消失。解决这种情况可以对布局中的所有东西进行浮动。如果把所有三个区块框都向左移动，那么第一个区块框向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框，呈现在一行中排列，如图2右图所示。

图2  浮动设置的对比演示

假如在一行之上只有极少的空间可供区块框浮动，那么这个区块框会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。而如果浮动元素的高度不同，那么当它们向下移动时，可能被其他浮动元素“卡住”，如图3所示。

图3  空间不足的区块浮动演示

2  行框和清理

在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足以包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这并不是我们想要的结果，所以可以使用clear属性解决这一问题。该属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。如下所示：

如果不清除浮动，那么第三个区块框就会和第一、第二个区块框显示在一行中，又因为第一、第二个区块框设置了浮动就脱离了文档流，所以第三个区块框会在第一个区块框的下面，如图4所示。如果我们在第三个区块框的样式中加一个清除浮动clear:both，则设置第三个区块框两边都不能挨着浮动框，如图5所示，所以第三个区块框就会在下一行独立出现。代码如下所示：

图4  没有设置清浮动

图5  设置清浮动

对于以上这种情况，我们使用最多的方法还是会将“清除浮动”单独定义一个CSS样式，然后使用单独一个区块框来专门进行“清除浮动”。代码如下所示：