CSS中overflow的用法是什么

谁借莪１个温暖的怀抱￠ 2024-03-29 15:19 49阅读 0赞

![8f8626fb658cda4b366f87e5a14de421.jpeg][]

根据css的盒模型概念，页面中的每个元素，都是一个矩形的盒子。

这些盒子的大小、位置和行为都可以用css来控制。

对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。

比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。

但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加css的overflow属性的时候了，它允许你设定该种情况下如何处理。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。

同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。

让我们分别看一下这几个值，并讨论一写共同用法和技巧。

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。

所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。

比如：

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

hidden

默认值visible的相反的值就是hidden。

它会将所有超出盒子的所有内容都给隐藏掉。

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。

尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。

比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……

scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。

值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

auto

overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。

清除浮动

设置overflow的一个更流行的用处是，说也奇怪，清除浮动。

设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。

意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。

就像这样：

对于此问题，经过测试，ie6会自动扩展父层元素的高度，而ie8和FF等浏览器加上overflow:auto后，即可清除浮动。

——神飞

这里有更多关于浮动的细节文章关于浮动的一切。

跨浏览器的烦恼

就像css中的很多东东，overflow有很多的跨浏览器的蹊跷的事情。

比如这些：

滚动条在盒子里面还是外面?

Firefox将其放到盒子外面，而ie则将其放到里面。

我认为只有ie是对的(它应该在里面的)。

看清楚这个明显的不同。

ie 8 扩展盒子的bug

ie8有很多有趣的新bug，包括一些非常严重的隐藏在网页中的。

这里有更多的关于ie8的overflow的bug的介绍。

破坏浮动布局

ie 6, 7 和 8都会扭曲默认的overflow visible值并将水平的扩展一个盒子一匹配内容(比如图片)。

这对使用浮动列布局的结构非常痛苦，而且单个扩展的列就能够将其它列挤下去并使布局乱掉！

事实上，这个我在验证的时候发现，只有ie6才会出现这种情况，而ie7、ie8和其它浏览器表现一致。

如果大家在使用ie7或ie8时有遇到这种情况，请告诉我，多谢！——神飞

滚动条能用css控制吗？

ie过去在较老的版本中允许这样，但是之后就收敛了。

比如许多表单元素，滚动条就不允许使用css控制。

我在它是否是件好事情上没有任何具体的意见，但是我可以说，在网站的所有内容上使用滚动条是很丑陋的和俗气的。

如果你需要一个美化的滚动条，你或许需要寻找Javascript来模拟。

ie 技巧

无论是否需要，ie都会一直显示一个垂直的滚动条，这对预防水平跳动是有些作用的，但并非总是可取的。

要想在ie中移除它，可以在body元素中设置overflow为auto。

原文地址：[https://www.weidianyuedu.com/content/3920856883343.html][https_www.weidianyuedu.com_content_3920856883343.html]

[8f8626fb658cda4b366f87e5a14de421.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/b4a7980f09414461baa41452b2185f85.png
[https_www.weidianyuedu.com_content_3920856883343.html]: https://www.weidianyuedu.com/content/3920856883343.html

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是PHP语言 PHP中return的用法

![302b1b240be5e852456233df1bddcd2a.jpeg][] 什么是PHP语言 PhP是一种服务器端htmL-嵌入式脚本描述语言。其最强大和

水深无声/ 2024年04月03日 07:45/ 0 赞/ 78 阅读

相关 CSS中overflow的用法是什么

![8f8626fb658cda4b366f87e5a14de421.jpeg][] 根据css的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和

谁借莪１个温暖的怀抱￠/ 2024年03月29日 15:19/ 0 赞/ 50 阅读

相关 iframe 标签的作用是什么？用法是什么？属性有什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ iframe 标签是什么？ ⭐ iframe 标签的作用什么？ ⭐ iframe 标签的用法 ⭐

拼搏现实的明天。/ 2023年10月14日 15:44/ 0 赞/ 43 阅读

相关 Css中overflow属性的认识

先来学一个和浮动没有什么关系的属性，overflow:hidden; 后面你将会看到这个属性和浮动的知识的联系。 overflow：溢出； hidden：隐藏。这

秒速五厘米/ 2022年08月20日 08:16/ 0 赞/ 187 阅读

相关 Css中overflow属性的认识

先来学一个和浮动没有什么关系的属性，overflow:hidden; 后面你将会看到这个属性和浮动的知识的联系。 overflow：溢出； hidden

柔情只为你懂/ 2022年08月20日 02:16/ 0 赞/ 160 阅读

相关 [html] 关于overflow 的用法

有的时候当一个块区域高度为 height:auto; ，即高度和内容的大小相同时，区域内有元素设置了 float 属性，此时高度不会自动变化：如当代码为：

我就是我/ 2022年08月11日 00:49/ 0 赞/ 226 阅读

相关 css的overflow属性

css的overflow属性规定内容溢出元素框时，如何处理溢出内容。 overflow属性可能的值： visible：默认值，内容不会被修剪，会呈现在元素框之外。 hid

亦凉/ 2022年06月07日 05:19/ 0 赞/ 205 阅读

相关 css中float、clear、z-index、overflow、百分号和像素值的用法

float: 设置元素浮动，元素浮动后就脱离了标准的放置位置，原本竖着排放的块元素会浮动的依次向左边浮动；而它后面的元素因为该元素已经浮动，脱离原来位置，而获得了该元素的标准摆

╰+哭是因爲堅強的太久メ/ 2022年05月09日 09:30/ 0 赞/ 90 阅读

相关 css——overflow属性用法

1、overflow属性规定如何处理如何处理不符合元素框的内容。 2、取值：Object.style.overflow=visible|hidden|scroll|auto；

朴灿烈づ我的快乐病毒、/ 2021年12月12日 02:37/ 0 赞/ 309 阅读

相关 mysql distinct用法是什么

mysql distinct用法是什么 mysql中去重 distinct 用法在使用mysql时，有时需要查询出某个字段不重复的记录，这时可以使用mysql提供的di...

红太狼/ 2020年06月15日 15:46/ 0 赞/ 799 阅读