《精通CSS》读书笔记——CH2.4 浮动

学习CSS最好的方式之一是直接开始使用它。

 

浮动

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。它不再处于文档流中，所以它不占据空间。

 

当把框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘，覆盖住了框2。如果把所有三个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

 

 

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

 

 

 

行框和清理

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

 

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

 

 

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

 

假设有一个图片，希望让它浮动到一个文本块的左边。希望将这个图片和文本包含在另一个具有背景颜色和边框的元素中。

    .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。

不幸的是，没有现有的元素可以应用清理，所以需要添加一个空元素并且清理它。

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

    .news img {
     float:left;
     }
     
    .news p{
    float:right;
    }

    .clear{
      clear:both;
      }

    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

还可以不对浮动的文本和图像进行清理，而是选择对容器div进行浮动：

 

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

    .news img {
     float:left;
     }

    .news p{
    float:right;
    }

    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

 

 

 

 这也会产生我们想要的结果。不幸的是，下一个元素会受到这个浮动元素的影响。

应用值为hidden或auto的overflow属性会自动地清理包含的任何浮动元素，而不需要添加额外的标记。这个方法并不适合所有情况，因为设置框的overflow属性会影响它的表现。

 最后，一些人使用CSS生成的内容或JavaScript对浮动元素进行清理。这两种方法的基本概念是相同的。并不直接向标记中添加进行清理的元素，而是将它动态地添加到页面中。

 

对于这两种方法，需要指定进行清理的元素应该出现在哪里，而且常常要添加一个类名：

    <div class="news clear">
    <img src="news-pic.jpg" />
    <p>some text</p>
    </div>

 

 

    在使用CSS方法时，结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容。在这个示例中，我添加了一个句点，因为它是个非常小的不引人注意的字符。不希望新内容占据垂直空间或者在页面上显示，所以需要将height设置为0，将visibility设置为hidden。因为被清理的元素在它们的顶空白边上添加了空间，所以生成的内容需要将它的display属性设置为block。

 

    这样设置之后，就可以对生成的内容进行清理：

    .clear:after {
    content: ".";
    height:0;
    visibility: hidden;
    display: block;
    clear:both;
    }