请叫我一米 » 使用 overflow 清除 float

这其实是一个非常普通的问题，在很久很久很久，真的很久以前，已经被说过很多次了，不过都是英文的，其实中文的也有很多，但是我还是想翻一下，一方面自己加深印象，两一方面很多初学者也可以很容易搜都，看到。那么就开始了。

问题描述就是，当使用了浮动(float)布局的时候，就是父层的高度不会自动扩展到浮动子层的高度，具体表现为，子层的高度出来了，但是利用开发工具看的话，只能看到子层的高度，父层就只有那么一点点高。

解决办法其实很简单，1. 在浮动元素之后使用 clear 属性，清除浮动即可，2. 给父元素使用 clearfix 属性，但是IE支持有问题。3. 使用 overflow 属性，这里就着重讲一下 overflow 清除浮动的方法。

例子一：

此例子主要讲解浮动内容子层，没有把父层撑开的问题，简单的结构可以如下。

<div class="container">
    <div class="a"></div>
    <div class="a"></div>
</div>

.a {float:left;}

这就会导致父层不被撑开的问题，解决方法很简单，父元素 overflow:auto 或者 overflow:hidden。即：

.container {
    overflow: auto;
}

如图：
overflow-auto

例子二：

overflow: auto; 也可以被用作阻止文字环绕图片，例如再设计 WP 博客的评论时，一个头像在左侧，评论内容在右侧，又不能设置宽度等，此时就可以给评论的层设置 overflow: auto; 即可，优点就是不用设置宽度或者浮动，即可使文字自动不环绕图片，又在其后。

如图：

.image {
    float: left;
}
.text {
    overflow: hidden;
}

问题：

1. overflow: auto; 如果文字很长，或者图片很大，总之内容超出了父层规定的区域，那么就会产生滚动条。

解决办法
1. 使用 overflow: hidden; 当然，如果你意思是多余内容要产生滚动条，那就用 auto;
2.使用 word-wrap: break-word;(文字) 和 max-width: 100%;(图片，使用后就自动缩放了)（当然，IE6 你懂得，我几乎放弃它了，不过）

demo 那么就要出现了。

demo1

demo2

来源：翻译

使用 overflow 清除 float