什么时候应该对
使用overflow:hidden?

2024-02-19

假设我有这样的 HTML 结构:

<div class="a">
 <div class="floated-left">...</div>
 <div class="floated-left">...</div>
</div>

我注意到如果我不设置overflow:hidden to .a,那么<div class="a">不占据任何垂直尺寸。例如,如果我将其背景设置为红色,则它根本不可见。用 FireBug 检查它表明它在那里,但几乎没有垂直尺寸。

为了解决这个问题,我发现我必须设置overflow:hidden to .a。然后是第一个<div>回顾其所有内容。

这是一个真实的例子:

<html>
<head>
  <style>
    .a { background-color: red; }
    .b { background-color: red; overflow: hidden }
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
  </style>
</head>

<body>
  <p>div with class a, that doesn't overflow:hidden:</p>
  <div class="a">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Mom!</div>
  </div>

  <div style="clear:both"></div>

  <p>div with class b, that does overflow:hidden:</p>
  <div class="b">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Dad!</div>
  </div>
</body>
</html>

注意如何Hi, Mom!没有得到红色背景(没有溢出:隐藏),而Hi, Dad!确实得到红色背景(有溢出:隐藏)。

谁能解释这种行为?

这是示例的屏幕截图:

谢谢,博达·西多。


当您浮动元素时,它们将从文档流中取出。除此之外,这意味着它们对父元素的尺寸没有影响(尽管其宽度将决定浮动在水平轴上的位置)。然而,它们确实会影响同级元素在容器内的定位,具体取决于这些同级元素是内联元素还是块级元素以及它们是否具有宽度。

为了使浮动的高度影响容器的高度,您必须在它们后面有一个元素来清除它们。然而,您在这里看到的实际上是 CSS 标准的一部分,您可以使用它来清除浮动,而无需额外的非语义标记。唯一的问题是这种行为在旧版浏览器及其 CSS 实现中可能会略有不同。此效果在自动溢出和隐藏溢出时都会出现,但在可见溢出时不会出现。在 IE

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

什么时候应该对
使用overflow:hidden? 的相关文章

  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • ASP.Net 控件的 InnerHTML 和 InnerText 属性之间的区别?

    例如 在使用 ASP NET 控件时 h1 text h1 如果我们想更改标题的文本 我们可以通过两个属性来完成InnerHTML and InnerText 我想知道这两个属性之间的基本区别是什么 InnerHtml让您直接输入 HTML
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • 设置overflow-y可见,而overflow-x为auto,以便内容可以垂直溢出父容器

    我在用着position absolute and position relative如果将其父级悬停在图像上 则在图像上显示文本 文本和图像父 div 所在的容器设置为overflow x auto 使其具有水平滚动条 我想要看起来垂直溢
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 为什么字体扩展仅适用于 PDF,而不适用于其他格式(HTML、XLS、DOC)?

    通过 Jaspersoft Studio 我们使用以下设置将用于 Web 应用程序的内置 Windows Calibri 字体变体导出到字体扩展 JAR 中 导出的jrfontextensions jar内的目录结构如下 jrfontext
  • 为什么我不能在 TCPDF 表中使用 č,ć,đ 图表?

    我正在为我的网站构建一个 tcpdf 文件 该 tcpdf 文件中有一个包含一些数据的表格 但我无法使该章程正常工作 对于编码 我使用 windows 1250 宪章女巫不起作用 我已经尝试过 utf 8 但仍然没有得到这个章程 tcpdf
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

随机推荐

  • 我应该如何为最终的 64 位编译器准备 32 位 Delphi 程序? [复制]

    这个问题在这里已经有答案了 可能的重复 迁移到 Delphi 2010 和 Unicode 时如何为 64 位做好准备 https stackoverflow com questions 1568685 how to also prepar
  • 从java调用带有表值参数的存储过程

    在我的应用程序中 我想执行类似的查询SELECT FROM 表 WHERE col IN list 其中 list 可以有可变的值 我正在使用 MS SQL 服务器数据库 当我用谷歌搜索这个问题时 我发现了这个链接 http www som
  • 如何检查 Kafka 中的消费者是否消费了某个主题

    如何检查特定消费者群体是否完全消费了某个主题 这相当于在标准排队系统中检查队列是否为空 这并不明显 因为每个消费者只能看到给定的分区 因此它不知道其组中的其他消费者是否消耗了他们的部分 我想这应该以某种方式完成AdminUtils or Z
  • 如何使div相对于父级的高度为100%?

    我坚持下面这样的事情 我需要将右上 div 设为 100 高度 其背景颜色将覆盖主 div 的整个高度 div style width 100 margin auto text align left border 1px solid 628
  • Magento 2 标签翻译显示大括号

    显示双花括号之间的多个翻译的标签 我在 Magento 2 的前端和后端都遇到这个问题 这是我到目前为止所尝试过的 清除并刷新缓存 重新部署静态内容 将 Magento 2 2 5 更新至 2 2 6 请查看图片以获取更多信息 Magent
  • 如何获取 JavaFX 中某个阶段的关闭事件?

    在JavaFX中 如果用户单击阶段的关闭按钮 X 最右上方的十字 如何获取事件 我希望我的应用程序在窗口关闭时打印调试消息 System out println Application Close by click to Close But
  • 为什么表别名通常都是小写?

    我总是这样看例子 但为什么呢 这是一个好的做法吗 因此它们与查询的其余部分 通常以大写形式编写 不同 至于这是否是最佳实践 如果您以全部大写形式编写查询 那么它肯定会使您的查询更易于阅读和理解
  • 如果代码中没有 return 语句,函数在 C 程序中返回什么

    我做了一个关于如何在 C 中递归地反转单链表的函数 功能如下 struct node reverseSLL2 struct node p struct node temp struct node temp1 if p NULL temp1
  • NEST 查询精确文本匹配

    我正在尝试编写一个 NEST 查询 该查询应根据精确的字符串匹配返回结果 我在网上研究过 有关于使用术语 匹配 匹配短语的建议 我已经尝试了所有这些 但我的搜索返回的结果包含部分搜索字符串 例如 在我的数据库中 我有以下几行电子邮件地址 电
  • 如何实施xgboost增量训练?

    问题是由于列车数据大小 我的列车数据无法放入 RAM 中 所以我需要一种方法 首先在整个训练数据集上构建一棵树 计算残差构建另一棵树等等 就像梯度提升树一样 显然如果我打电话model xgb train param batch dtrai
  • Rails 选择 GROUP 中 COUNT 最高的对象

    目标是选择Store其中一个Coupon最常用于 目前 我有这个 并且它有效 分解以供解释 coupon rb has many redemptions has and belongs to many stores def most pop
  • SML 和函数式编码风格

    我开始学习标准机器学习编程语言 https www coursera org course proglang course 在第一个作业中 我尝试编写一个函数is older需要两个日期并评估为true or false 它评估为true如
  • 使用 JavaScript 将 CSV 转换为 XML

    我是 javascript 新手 我需要将 csv 字符串数据转换为 xml 如下所示 CSV 数据 product pakageing qty mno 100ML 200 pqr 400ML 300 abc 150ML 100 XML 应
  • 使用 chromecast 从 IP 摄像机进行流式传输

    我正在尝试通过我的 Android 设备通过 IP 摄像头进行流传输 我已经从发布的代码中编辑了 URLGitHub https github com googlecast cast android sample当我尝试从摄像机的 IP 地
  • log4net 用于 IIS 中托管的 WCF 服务库

    对于一个项目 我有一个 WCF 服务库 目前非常简单 它通过 WCF 服务网站项目托管在 IIS 7 5 中 对于该 WCF 服务库 我需要 log4net 来记录一些重大事件 但启动并访问网站后 不会创建任何日志文件 这是我的配置详细信息
  • 返回 std::map 值的地址是否安全?

    我有一个std map
  • Haskell:instance Functor ((->) r) 的意义是什么

    我承认 我的问题可能源于缺乏知识 而且比较模糊 但我试着去理解 有一些疑问 却无法解决 那么GHC Base有这样的定义 它的意义是什么 instance Functor gt r where fmap 从编程语言的角度来看 我们有真正的基
  • 模拟多次调用的静态方法

    我有一个静态方法 在多个地方使用 主要是在静态初始化块中 它接受一个 Class 对象作为参数 并返回该类的实例 我只想在特定的 Class 对象用作参数时模拟此静态方法 但是 当从其他地方使用不同的 Class 对象调用该方法时 它会返回
  • 使用从文件读取的字符串在 Typescript 中进行字符串插值

    我读过关于模板字符串 http basarat gitbooks io typescript content docs template strings html在打字稿中 我想知道当我从这样的文件中读取字符串时是否可以使用它们 let x
  • 什么时候应该对

    假设我有这样的 HTML 结构 div class a div class floated left div div class floated left div div 我注意到如果我不设置overflow hidden to a 那么