精通CSS高级Web标准解决方案:浮动

    最后一种定位模型是浮动模型。浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

    如图2-13所示，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

图2-13  向右浮动的元素

    在图2-14中，当把框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

图2-14   向左浮动的元素

    如果包含块太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够空间的地方（见图2-15）。如果浮动元素的高度不同，那么当它们向下移动时可能会被其他浮动元素“卡住”。

    图2-15  如果没有足够的水平空间，浮动元素将向下移动，直到有足够空间的地方

    行框和清理

    浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像（见图2-16）。

图2-16  浮动框旁边的行框被缩短

    要想阻止行框围绕在浮动框的外边，需要对这个框应用clear。clear属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。为了实现这种效果，在被清理元素的顶空白边上面添加足够的空间，使元素的顶边缘垂直下降到浮动框下面（见图2-17）。

图2-17  清理元素的顶空白边，为前一个浮动框留出足够的垂直空间

    浮动元素脱离了文档流，不影响周围的元素。但是，对元素进行清理实际上为前面的浮动元素留出了垂直空间。

    这是一个有用的布局工具，它让周围的元素为浮动元素留出空间。这解决了前面看到的绝对定位的问题，也就是垂直高度的改变不影响周围的元素，从而破坏了设计。

    我们来更详细地看看浮动和清理。假设有一个图片，希望让它浮动到一个文本块的左边。希望将这个图片和文本包含在另一个具有背景颜色和边框的元素中。你可能会编写下面这样的代码：

    .news{
    background-color: gray;
    border: solid 1px black;
    }

    .news img {
     float:left;
     }
     
    .news p{
    float:right;
    }
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

    
    但是，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用clear（见图2-18）。

    图2-18  因为浮动元素不占据空间，所以容器元素不包围它们。添加一个进行清理的空元素可以迫使容器元素包围浮动元素