使用 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

来源:翻译

评论

  1. 10年前
    2011-8-08 21:04:43

    先沙发。。。嘿嘿

  2. 10年前
    2011-8-08 21:51:05

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

  3. 一米 博主
    10年前
    2011-8-08 22:43:51

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

  4. 10年前
    2011-8-09 16:46:50

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

  5. 一米 博主
    10年前
    2011-8-09 16:54:13

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

  6. 10年前
    2011-8-10 17:42:17

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

  7. 10年前
    2011-8-10 19:24:00

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

  8. 10年前
    2011-8-10 19:41:11

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

  9. 一米 博主
    10年前
    2011-8-10 20:41:31

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

  10. 10年前
    2011-8-11 16:47:07

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

  11. 10年前
    2011-8-11 19:34:32

    图挂了

  12. 一米 博主
    10年前
    2011-8-12 11:09:55

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

  13. 10年前
    2011-8-13 17:21:45

    高手很多,来观摩下

  14. 一米 博主
    10年前
    2011-8-14 7:35:44

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

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇