最常见的情况是:容器没设 height、max-height 或 width,导致浏览器根本判断不出“是否溢出”。overflow 只对有明确尺寸限制的块级元素生效——它不是魔法,而是基于盒模型边界的裁剪指令。
overflow
精选推荐
css网页导航栏在手机端撑破屏幕怎么办_使用百分比宽度和flex布局解决
css 吸顶效果在某些页面失效怎么办_通过 position sticky 限定触发区域
最新动态
css overflow 属性怎么控制内容溢出_溢出处理方式解析
CSS弹性盒子与绝对定位_当定位元素遇到Flex父容器
因为绝对定位元素已脱离文档流,Flex的对齐属性只作用于参与布局的子项(即非position: absolute的子元素)。父容器设了display: flex,但对position: absolute的子元素完全无效。
CSS网格单位fr详解_理解弹性比例片段在布局中的分配
fr 不是像素、百分比或 em,它不表示绝对长度,也不依赖父容器尺寸的百分比计算;它是 CSS Grid 中专用于**分配剩余可用空间**的弹性单位。当所有 grid-template-columns 或 grid-template-rows 用 fr 定义时,浏览器先扣除固定尺寸(如 100px、auto、minmax(200px, 1fr) 中的最小值部分),再把剩下的空间按 fr 数值比例切分。
css如何通过Flexbox实现分栏布局_利用flex布局分配列宽和空间
直接写flex: 1并不等于“均分”,它其实是flex: 1 1 0的简写,表示「可放大、可缩小、基准宽为0」。这意味着所有设了flex: 1的子项会平分剩余空间(不是父容器总宽),而内容本身不占空间时,它们才看起来等宽。
CSS溢出内容处理_overflow属性的scroll、hidden与auto
很多人用 overflow: scroll 是想“确保能滚动”,结果发现滚动条永远存在,占空间、影响布局,尤其在 macOS 上还带惯性滚动干扰点击。这不是 bug,是规范行为:scroll 的语义就是「始终启用滚动机制」,浏览器必须渲染滚动条(哪怕没内容可滚)。
如何优雅解决固定宽度动态垂直导航栏与主内容重叠问题
本文提供纯 css 方案,通过重构布局结构(用 `position: fixed` 容器包裹导航与主内容,并启用 flex 布局),使动态宽度的垂直导航栏与 “ 区域始终自适应、无重叠,兼容小屏幕设备,无需 javascript。
css浮动图片和文字间距不一致怎么办_使用margin和padding调整
浮动图片后,紧随其后的文字出现上下间距不一致,常见于段落首行被图片“顶起”或末行“塌陷”。这不是文字本身的问题,而是 float 脱离文档流后,行框(line box)高度计算异常所致——尤其当图片高度与行高不匹配、或字体渲染存在 subpixel 差异时更明显。
CSS平滑旋转动画_利用transform:rotate打造加载进度条
直接写 transform: rotate(360deg) 做无限旋转,浏览器很可能在 0° 和 360° 交界处闪一下或顿一下——这不是 bug,是 CSS 动画对角度值做插值时的自然行为。浏览器会按最短路径补间,比如从 350° 到 10°,它可能走 -340° 而不是 +20°,导致逆向转动。
CSS定位技术全景视图_100条核心知识点构建完整体系
CSS定位不是“选一个属性就完事”的事,它本质是元素在文档流中的坐标系统切换——用错上下文,position再熟也白搭。
Flexbox 布局中 textarea 导致意外滚动条的成因与解决方案
当在 flex 容器中使用 “ 且移除 footer 后出现多余垂直滚动条,根本原因是 textarea 默认为 inline-block 元素,在行内布局中保留基线对齐产生的底部间隙;设置 `display: block` 即可彻底解决。