使用 overflow 清除 float

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

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

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

例子一:

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

1
2
3
4
<div class="container">
    <div class="a"></div>
    <div class="a"></div>
</div>
1
.a {float:left;}

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

1
2
3
.container {
    overflow: auto;
}

如图:
overflow-auto

例子二:

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

如图:

1
2
3
4
5
6
.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

来源:翻译

14条回应:“使用 overflow 清除 float”

  1. 爱惜说道:

    先沙发。。。嘿嘿

  2. Yusky说道:

    幸好还有板凳。。
    这个看不懂。。。打打酱油算了~~

  3. 一米说道:

    @爱惜
    @Yusky
    我这里沙发板凳都不值钱的,嘿嘿。

  4. 三米说道:

    一米,你这个主题不错,有点特色,喜欢。

  5. 一米说道:

    @三米
    嘿嘿,那就买了去自己用。

  6. 何大爷说道:

    这是付费主题 ?感觉挺有个性的

  7. WayJam说道:

    以前老是遇上这种情况,不知道怎么解决。。

  8. jixiangac说道:

    我怎么感觉我 overflow: hidden这个滥用了

  9. 一米说道:

    @何大爷
    那就买一份呗。
    @WayJam
    现在肯定已经知道了。
    @jixiangac
    嘿嘿,不会吧?

  10. jamiexin说道:

    我说我的css+div怎么总是出现位置错误。。回去试试

  11. 一米说道:

    @jamiexin
    嘿嘿,多学学就不错了。
    @无冷
    嗯,图床不稳定啊。

  12. 与蚊子共舞说道:

    高手很多,来观摩下

  13. 一米说道:

    @与蚊子共舞
    非高手,只是去往前端路上的小菜鸟。

发表评论

电子邮件地址不会被公开。 必填项已用*标注