围住浮动元素的三种方法（css设计指南笔记）

    浮动元素脱离了文档流，其父元素也看不到它了，因而不会包围它，比如下面的例子。

<section>
    <img src="images/rubber_duck2.jpg">
    <p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the page.
</footer>
<style>
section {border:1px solid blue; margin:0 0 10px 0;}
p {margin 0;}
footer {border:1px solid red;}
</style>

效果如下：

现在我们看到的是常规文档流，即块级元素包围着所有子元素，而且在页面中自上而下相互堆叠在一起。如果想吧第一段文字放在图片右侧，最简单的就是在图片中加一个float，其他不变。

section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}

                                     

但这貌似和我们想要的有差距（左图），<footer>也被提了上来。如何变为右图那种呢？有三种方法：

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

父元素添加overflow:hidden，指的是强制它包围浮动元素。

注：实际上，overflow:hidden声明的真正用途是防止元素被超大的内容撑大，应用overflow:hidden之后，包含元素依然保持其设定的宽度

，而超大的自内容则会被容器剪切掉；overflow:hidden第二个作用即它能可靠地迫使父元素包含其浮动在子元素

方法二：同时浮动父元素

section {border:1px solid blue; float:left; width:100%;}
img {float:left;}
footer {border:1px solid red; clear:left;}

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

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

第一种方式不太理想，即在<p>标签下面添加一个清除用的div，不推荐

<section>
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element…</footer>

section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}

第二种方式是clearfix规则

<section  class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>

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

clearfix规则用的很多，它只添加了一个清除的包含句点作为非浮动元素（必须得有内容，而句点是最小的内容）。规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见。没有父节点也可以使用clearfix。