overflow:hidden的作用

最新推荐文章于 2021-08-18 09:46:14 发布
最新推荐文章于 2021-08-18 09:46:14 发布
阅读量504 收藏
点赞数
分类专栏： 平面教程
本文介绍了CSS中overflow:hidden属性的作用及使用方法。当设置了该属性后，如果子元素的内容超出了父元素的限定宽度，则超出部分会被自动隐藏。适用于网页布局中需要限制内容显示范围的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS中，overflow:hidden的作用是隐藏溢出,就是如果定义了宽度的话，超过这个宽度就会自动隐藏起来。

比如：<div style="width:300px;overflow:hidden" id=1><div id=2></div><div>
当ID=2的这个DIV高度设定的宽度超过了300px，那么超出的部分将自动被隐藏。只会显示出300这么多的字段。

本文来自: 51模板集( www.51mubanji.com ) 详细出处参考： http://www.51mubanji.com/pmjc/DIVCSSjc/72.html


前端学习之——overflow:hidden的两个作用
Calypso6的博客
11-13 1269
overflow:hidden 作用一：隐藏溢出 熟知的作用就是给父元素设置后，子元素若从父元素中溢出，溢出部分不会显示 作用二：清除浮动 子元素浮动时，给父元素设置overflow:hidden，父元素尝试隐藏子元素超出父元素的部分，但是因为子元素浮动了，父元素找子元素的下边界时犯迷糊，所以父元素自动增大以包住子元素，从而达到子元素好像没有浮动一样的效果。 推广，对于兄弟元素，前一个兄弟开启浮动，后一个元素设置overflow:hidden，后一个元素清除了前一个元素浮动的效果，便排到前一个元素的
CSS中关于overflow:hidden的三大作用
南风花海的博客
03-01 309
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）_Emily-优快云博客_overflow:hidden一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。/*css样式*/<style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overfl
css中overflow:hidden失效问题的解决方法
11-21
因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。 一探究竟 重要的事再说一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隐藏溢出的绝对定位的子元素，...
IE overflow:hidden失效的解决方法
12-10
overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。 我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:...
li样式不显示使用overflow:hidden导致Li前面点、圈等样式不见
12-09
实际上用了overflow:hidden 会影响 list-style，即当ul 中的li 的overflow 为hidden的时候， list-style不起作用，不显示前面的点、圈等样式。 解决办法：在ul或li内加入样式：list-style-position: inside; 即可。...
使用overflow: hidden来禁用页面滚动条
09-28
在这个主题中，我们将详细介绍如何使用CSS属性`overflow: hidden`来禁用页面滚动条。这个属性是一种简单而又快速的方法来实现滚动条的禁用，而且它也能够兼容较老的浏览器，如IE6和IE7。 `overflow`属性是CSS中的一...
关于overflow:hidden实现的这些功能你都知道了么？溢出隐藏、清除浮动、解决外边距塌陷...
小小前端攻城狮的博客
04-12 465
简介 overflow:hidden主要有三大作用：溢出隐藏、清除浮动、解决外边距塌陷 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
overflow:hidden 的妙用
一名假人的博客
05-26 866
取消的滚动条 在自己写一写网页的时候，有一个要求就是写的网页不能出现水平的滚动条，以免影响网页的观看的效果。这时就可以对body设置overflow-x:hidden 用来取消水平的滚动条。 除此 控制显示区域 在写类似于轮播图的时候，我们只让一个固定的div中显示图片，而其子图片标签则通过animation之类的动画控制移动。 结构如: <div> <img>&lt...
模态框
qq_38796823的博客
09-10 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
树上骑个猴的博客
08-18 1986
一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 /*css样式*/ <style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflow: hidden; /*溢出隐藏*/ } </style> /*html*/ <
css中：overflow：hidden的作用
热门推荐
qq_41985171的博客
04-19 4万+
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。1.我们给一个父元素，里面有两个子元素2.样式如下：给父元素设置背景颜色，子元素设置边框，两个字元素向左浮动。.3.运行结果如下：我们发现父元素的背景色并没有显示出来4.给父元素加上overflow：hidden5.运行结果：父元素的背景色被显示出来6.分析原因：父元素未被撑开当子元素浮动时，它的父元素不是...
探究CSS属性overflow:hidden的作用：隐藏溢出和清除浮动
javaloveiphone的专栏
03-16 1万+
1、首先说一下overflow的定义：overflow属性规定当内容溢出元素框时发生的事情。2、overflow属性可能的值： 3、overflow:hidden的作用：1)、对超出尺寸进行裁切，也就是隐藏溢出(这个比较好理解，不做解释)2)、清除浮动: a、浮动的元素会脱离文档流，高度塌陷，同时父元素如果没有主动设置高度，因无法检测到浮动元素的高度，也会塌陷，高度为0。 b、元素浮
电力系统低碳调度：源荷多时间尺度优化方法及MATLAB+Cplex实现
最新发布
08-14
内容概要：本文探讨了一种计及碳捕集电厂低碳特性的含风电电力系统源-荷多时间尺度调度方法。该方法旨在通过协调源侧（如碳捕集电厂）和荷侧（如价格型和激励型需求响应资源），提升整个电力系统的低碳性能。文中详细介绍了如何利用MATLAB和CPLEX进行建模，包括定义决策变量、构建目标函数以及设置约束条件。特别地，文中提到当风电预测误差较大时，激励型需求响应能够显著减少碳捕集率的波动，从而有效应对风电出力的不确定性。最终实验结果显示，在协同调度模式下，系统总碳排放降低了23.7%，而需求响应成本仅增加了8%。 适合人群：对电力系统调度、低碳能源技术和优化算法感兴趣的科研人员和技术开发者。 使用场景及目标：适用于研究电力系统低碳化转型过程中，如何通过源荷两侧资源的高效配置来实现节能减排的目标。同时，也为实际工程应用提供了有价值的参考。 其他说明：文中提供的MATLAB代码具有良好的可读性和扩展性，便于用户根据实际情况调整参数进行仿真实验。
overflow: hidden是sm
04-04
<think>好的，用户想了解CSS中overflow:hidden的作用和用法。首先，我需要回忆一下这个属性的基本功能。记得overflow:hidden主要用来处理内容溢出容器的情况，当内容超过父容器的大小时，隐藏超出的部分。但根据提供的引用，它还有清除浮动和解决父容器高度坍塌的作用。 接下来，我应该分点详细说明每个作用。首先是溢出隐藏，这里需要解释当父元素有固定高度，子元素内容超出时，设置overflow:hidden会将超出部分隐藏。要结合引用中的例子，比如引用[2]提到给父div固定高度并设置overflow:hidden来隐藏溢出。 然后是清除浮动。浮动元素会导致父容器高度坍塌，因为浮动元素脱离文档流。这时候父容器的高度可能无法正确扩展。引用[1]和引用[4]都提到，overflow:hidden可以清除浮动，即使父容器没有固定高度，通过触发BFC（块级格式化上下文）来包含浮动元素。需要解释BFC的概念，但可能用户不需要太深入，简单说明即可。 第三个作用是解决高度坍塌，这和清除浮动有关联。当父元素包含浮动子元素时，自身高度可能为0，使用overflow:hidden可以让父元素重新计算高度，包裹住浮动元素。引用[4]提到它“解除坍塌的重任”，这里需要强调即使没有固定高度也能生效。 接下来是用法部分，需要分情况讨论。引用[4]提到区分父元素是否有固定高度的情况。当有固定高度时，主要是溢出隐藏；没有固定高度时，用于清除浮动和解决坍塌。需要举例说明，比如引用中的.parent类例子，没有固定高度但设置了overflow:hidden，从而清除了子元素的浮动。 另外，要注意语法正确，使用$...$格式，比如在提到BFC时可能需要用代码块或公式，但用户问题不涉及数学公式，可能不需要。但用户给的示例中有提到数学表达式，所以可能需要检查是否有必要，但这里应该用中文描述即可。 最后生成相关问题，参考用户提供的示例，问题应该围绕overflow:hidden的其他作用、使用场景、与overflow:auto的区别等。确保问题符合用户可能进一步探索的方向。 需要确保回答结构清晰，分点明确，引用对应的参考文献，比如在说明清除浮动时引用[1]和[4]，溢出隐藏引用[2]和[3]。同时注意引用标识的位置，自然添加在句末。 检查是否有遗漏的功能，比如是否还有其他作用，根据提供的引用，主要就是这三个：溢出隐藏、清除浮动、解决高度坍塌。确认覆盖全面，没有错误信息。比如，引用[3]中的例子也是溢出隐藏的情况，而引用[1]的例子展示了清除浮动。 可能用户会混淆overflow:hidden在不同场景下的表现，比如有固定高度和没有的情况，需要明确区分。比如，当父元素没有固定高度时，overflow:hidden触发了BFC，从而包含浮动元素，导致父元素高度扩展。这种情况下即使没有固定高度，也能清除浮动，而如果有固定高度，则同时处理溢出。 总结，回答应该分三部分：作用，每个作用详细说明并引用，用法分情况讨论，最后生成相关问题。确保语言简洁，用中文，避免专业术语过多，必要时解释术语如BFC，但可能用户只需要知道效果即可。</think>### CSS属性`overflow:hidden`的作用及用法详解 #### 一、核心作用 1. **溢出隐藏** 当子元素内容超出父容器尺寸时，隐藏溢出部分。例如父元素设置了固定高度，子元素高度超过时，超出的内容会被裁剪[^2]。 ```css .container { height: 150px; overflow: hidden; /* 隐藏溢出内容 */ } ``` 2. **清除浮动** 当父元素包含浮动子元素（如设置了`float: left`）时，父元素高度会坍塌（高度变为0）。通过`overflow:hidden`可触发BFC（块级格式化上下文），使父元素重新包裹浮动子元素[^1][^4]。 ```css .parent { overflow: hidden; /* 清除浮动并恢复父元素高度 */ } ``` 3. **解决高度坍塌** 即使父元素未设置固定高度，`overflow:hidden`也能通过BFC机制自动计算高度，避免因浮动子元素导致的高度坍塌问题。 #### 二、用法分类 1. **父元素有固定高度时** - 主要作用：隐藏溢出内容（如文本、图片超出容器）[^2][^3]。 - 示例： ```css .box { height: 200px; overflow: hidden; } ``` 2. **父元素无固定高度时** - 主要作用：清除浮动、解决高度坍塌。 - 示例： ```css .parent { overflow: hidden; /* 包裹浮动子元素 */ } .child { float: left; } ``` #### 三、注意事项 - **BFC机制**：`overflow:hidden`通过触发BFC实现清除浮动，BFC会隔离内部元素布局，避免外部干扰[^4]。 - **兼容性**：现代浏览器普遍支持，但在某些旧版本中可能需要额外处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值