围住浮动元素的三种方法

浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有
时候并非我们想要的,下面向大家传授三种围住浮动子元素的方法。记住,这三种
方法你都得掌握,这样才能审时度势,选择最合适的一种。

---

为了演示浮动元素的行为,这种行为对布局会产生什么影响,以及解决这个问题的
三种方法,我们首先要从一张带标题的图片开始。图片和标签包含在一个 section
元素中,而 section 元素后面跟着一个 footer 元素。可以把这个 footer 元素想象成
很多网页底部都会有的与页面同宽的页脚。

css样式:

css    section {
        border: 1px solid blue;
        margin: 0 0 10px 0;
    }
    p {margin: 0;}
    footer{
        border: 1px solid green;
    }

html文档结构：

html    <section>
        <img src="http://dummyimage.com/100x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
        <p>It's fun to float..</p>
    </section>
    <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptate ipsam nemo unde commodi reiciendis sunt vel dolorem, minima ipsum ipsa magni laborum reprehenderit! Reprehenderit neque, libero aut corporis quia.</footer>

现在的页面效果如下：

现在我们看到的是常规文档流,即块级元素包围着所有子元素,而且在页面中自上
而下相互堆叠在一起。假设我们想让图片标题位于图片右侧,而不是像现在这样位
于下方。运用刚刚学到的知识,我们知道实现这个目标最简单的方式就是浮动图片。
试试看吧。现在我们需要给图片添加一个浮动效果！

csssection img {
    float:left;
}

浮动以后以后的效果如下：

可以看到文字都围绕在了图片周围，但是这并不是我们想要的结果！

---

方法一:为父元素添加 overflow:hidden

我们给section应用overflow:hidden之后，达到了我们想要的布局效果

csssection {
        border: 1px solid blue;
        margin: 0 0 10px 0;
        overflow: hidden;
    }

效果图如下：

实际上, overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用
overflow:hidden 之后,包含元素依然保持其设定的宽度,而超大的子内容则会被容
器剪切掉。除此之外, overflow:hidden 还有另一个作用,即它能可靠地迫使父元素
包含其浮动的子元素。

方法二:同时浮动父元素

第二种促使父元素包围其浮动子元素的方法,是也让父元素浮动起来。

csssection {
        border: 1px solid blue;
        margin: 0 0 10px 0;
        float: left;
    }
    section img {
        float: left;
    }
    p {margin: 0;}
    footer{
        clear: left;
        border: 1px solid green;
    }

浮动 section 以后,不管其子元素是否浮动,它都会紧紧地包围(也称收缩包裹)住它的子元素。因此,需要用 width:100% 再让 section 与浏览器容器同宽。另外,由于 section 现在也浮动了,所以 footer 会努力往上挤到它旁边去。为了强制 footer依然呆在 section 下方,要给它应用 clear:left 。被清除的元素不会被提升到浮动元素的旁边。

方法三:添加非浮动的清除元素

第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。

css.clear_float {
        clear: left;
    }

插入一个用于清除浮动的空元素：

html<section>
        <img src="http://dummyimage.com/100x100/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
        <p>It's fun to float..</p>
        <p class="clear_float"></p>
    </section>
    <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptate ipsam nemo unde commodi reiciendis sunt vel dolorem, minima ipsum ipsa magni laborum reprehenderit! Reprehenderit neque, libero aut corporis quia.</footer>

同样，更简洁的方式是声明一个clearfix类， 然后把这个类应用于section标签：

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