CSS 浮动规则

    前面介绍过 CSS 浮动的基本概念，这里继续介绍 CSS 浮动的规则。
    规则一： 浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界。
    注：浮动元素的包含块指的是其最近的块级祖先元素。
    规则二： 浮动元素的左（或右）外边界必须是源文档中之前的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
    如上图，图片都是向左浮动。由于中间图片顶端在上面图片的中间位置，所以它紧挨上面图片右边放置。而下面图片的顶端已在上面图片的下面，所以此图片左边界可以在上面图片左边界的左边。
    规则三： 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
    如上图，上面图片向左浮动，下面图片向右浮动。本条规则避免了左浮动元素和右浮动元素重叠的情况，正由于本条规则，右浮动元素需要向下移动。
    规则四： 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
    css
    .float_left {
    float: left;
    padding: 20px;
    border: 2px solid yellow;
    background-color: green;
    }
    #prev-text {
    background-color: blue;
    }
    #next-text {
    background-color: red;
    }

    html

  北京美容整形http://www.ahzdzs.com/

    <p id="prev-text">
    There was once a farmer who had a fine olive orchard. He was very hardworking,
    and the farm always prospered under his care. But he knew that his three sons
    despised the farm work, and were eager to make wealth, trough adventure.
    </p>
    <p class="float_left">
    When the farmer was old, and felt that his time had come to die, he called
    the three sons to him and said, "My sons, there is a pot of gold hidden
    in the olive orchard. Dig for it, if you wish it."
    </p>
    <p id="next-text">
    The sons tried to get him to tell them in what part of the orchard the gold was hidden;
    but he would tell them nothing more.
    </p>