个人笔记——overflow:hidden;的两个作用

最新推荐文章于 2026-06-20 08:28:09 发布
原创 最新推荐文章于 2026-06-20 08:28:09 发布 · 274 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css3
本文深入解析CSS中overflow属性的两大核心应用：隐藏溢出内容，实现页面美观布局；清除浮动，解决子元素浮动引起的父元素高度塌陷问题，确保布局自适应。掌握这两个技巧，可有效提升网页设计的专业度。

在这里插入图片描述
在这里插入图片描述
1.隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
2.清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

在这里插入图片描述

a2543035112
关注
overflow:hidden；的两个作用
迪迦 • 奥特曼
08-14 369
overflow:hidden; 1. 隐藏溢出 当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观 2. 清除浮动 当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。 ...
overflow:hidden 的几种作用【转】
{玖}单纯着，幸福着，思考着
04-24 434
功能1、隐藏溢出 在IE6下，当子容器的宽高超出父容器时，父容器就会被撑开来。 例1：页面上有一个300*100的区域，放置滚动图片，父容器为边框，子容器是一张张的图片，那么此时，父容器起到遮罩的作用，除定义宽和高的值以外，还必须写overflow:hidden，这样就能把子容器的其它内容隐藏。   例2：网站的首页常常有这样的标题列表（如下图） 如果不事先告诉编辑这个区域是多...
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
热门推荐
Emily
10-23 28万+
一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 /*css样式*/ <style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflo...
每个程序员都应读的书
ymzhou117的专栏
12-20 2210
转自：http://blog.jobbole.com/5886/ 2008年8月4日，StackOverflow 网友Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本，你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自
前端学习之——overflow:hidden的两个作用
Calypso6的博客
11-13 1360
overflow:hidden 作用一：隐藏溢出 熟知的作用就是给父元素设置后，子元素若从父元素中溢出，溢出部分不会显示 作用二：清除浮动 子元素浮动时，给父元素设置overflow:hidden，父元素尝试隐藏子元素超出父元素的部分，但是因为子元素浮动了，父元素找子元素的下边界时犯迷糊，所以父元素自动增大以包住子元素，从而达到子元素好像没有浮动一样的效果。 推广，对于兄弟元素，前一个兄弟开启浮动，后一个元素设置overflow:hidden，后一个元素清除了前一个元素浮动的效果，便排到前一个元素的
overflow：hidden作用
m0_64380162的博客
04-29 2万+
overflow：hidden具有三个作用，有查出边框部分隐藏的作用，清除浮动的作用，解决边框塌陷的作用。 1.超出变宽部分隐藏 大家来看一下下面的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
overflow:hidden 属性详细解释
qq_36470686的博客
09-26 3万+
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。我们下面来详细阐释一下。 测试代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .aBox{ background-col...
overflow: hidden的用法
qq_43320218的博客
03-31 1万+
overflow:hidden的三个用法，以及清除浮动的原因，还有BFC相关知识。 ...
css overflow:hidden为什么会失效
.
02-17 1万+
现象是给元素设置了overflow:hidden，但超出容器的部分并没有被隐藏，难道是设置的hidden失效了吗？我们知道，overflow属性值有这几种： visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。 hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。 scroll：声明内容将被剪裁，但有可能出现滚动条来查看被剪裁掉的内容。滚动条出现的位置在inn
overflow:hidden的两个作用
仗剑天涯
02-25 632
overflow:hidden的两个作用
overflow:hidden的作用
zengyonglan的博客
11-25 8088
功能1、隐藏溢出 功能2、消除浮动 在IE6下，当子容器的宽高超出父容器时，父容器就会被撑开来。 解决办法：在父容器中除定义宽和高的值以外，还必须写overflow:hidden，这样就能把子容器的其它内容隐藏。 但是在火狐或者其他浏览器里面发现，当子容器这个div的宽度和高度都大于父容器这个div的时候，父容器并没有被内撑开而是依旧显示为我们指定的宽高。如下图： 例如：结构如下：<di
模态框
qq_38796823的博客
09-10 470
<!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...
使用HTML写一个悬浮摄像头，可拖拽、放大、缩小
weixin_52803316的博客
06-13 701
这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。
vue实现三角抽象思维计算矩形面积
cf8833的博客
06-20 211
这篇文章摘要： Vue组件实现了一个可交互的直角三角形与内嵌矩形绘图工具。用户可通过控件调整直角三角形的两条直角边长度(AB和AC)以及内嵌矩形的宽度和高度比例。组件实时计算并显示三角形面积、矩形面积及其占比、斜边长度等几何数据。绘图功能使用Canvas API实现，包含网格背景、三角形和矩形的绘制、顶点标注和尺寸标注。关键特性包括：响应式数据绑定、实时图形更新、面积计算和百分比显示。当矩形顶点F位于斜边BC上时，满足宽度比例+高度比例=1的关系。
Snake最终版以及程序文件
06-20
在gcc环境下使用,包含所有使用到的资源
易语言源码易语言GDI渐变矩形源码
06-20
易语言源码易语言GDI渐变矩形源码
基于风光储能和需求响应的微电网日前经济调度（Python代码实现）
最新发布
06-20
内容概要：通过Python代码实现基于风光储能和需求响应的微电网日前经济调度模型，综合考虑风能、光伏等可再生能源出力不确定性、储能系统的充放电行为以及需求响应机制，构建优化调度模型以降低系统运行成本、提高能源利用效率和电网运行的经济性与可靠性；该资源提供了完整的代码实现与技术解析，适用于科研复现与教学实践。; 适合人群：具备一定电力系统背景、Python编程基础和优化理论知识的科研人员、研究生及高年级本科生。; 使用场景及目标：①研究微电网在含高比例可再生能源条件下的日前经济调度策略；②探究储能系统与需求响应在削峰填谷、降低用能成本中的协同作用；③实现调度模型的编程复现与算法优化。; 阅读建议：建议结合相关电力系统优化理论与Python编程实践，深入理解模型构建逻辑与代码实现细节，可进一步拓展至多时间尺度调度或不确定性优化方法的研究。
扫地机器人（solidworks+step+x_t).rar
06-20
扫地机器人（solidworks+step+x_t).rar
HZFS.SHX.rar
06-20
当 CAD 缺失对应字体时，图纸文字会显示异常，出现乱码、问号。将下载好的字体文件复制到 AutoCAD 的 Fonts 文件夹中，即可恢复正常显示。
AI矩阵投放，支持平台「抖音_小红书_快手_视频号_B站」，支持已发布抖音_B站账号的视频数据回收；.zip
06-20
做了十年独立站，操盘超1亿美金预算，我把我自己蒸馏成了30 个独立站AI顾问。这是一套面向独立站与 DTC 品牌的全链路增长顾问 Skill 系统，覆盖诊断、选品、品牌、广告投放、CRO、留存、运营与规模化增长等模块。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值