overflow与display造成元素高度变化

原创 于 2022-05-09 13:54:00 发布 · 908 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html #前端

本文讲述了如何在CSS中使用`vertical-align:bottom`来修正`display:inline-block`和`overflow:hidden`导致的基准线移位问题，通过实例说明了关键属性的组合应用。

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

问题产生：

"桃乐西"为了同列显示增加了display: inline-block;和overflow: hidden; 这两个属性会造成基准线上移 即变为margin-box

解决方法：此时需增加属性vertical-align:bottom; 基准线为bottom

  max-width: 300rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 34rpx;
  vertical-align:bottom;

MockingBHM
关注
HTML中css的位置信息居然会导致元素大小发生变化
**My Coding Family**
10-21 968
问题的根本原因可能是由于使用了物理单位mm与绝对定位以及浏览器的渲染机制共同作用导致的。当top值较大时，浏览器可能会错误处理这些单位。使用相对单位（如px）可以避免这种问题，同时确保布局稳定和渲染一致。希望如上措施及解决方案能够帮到有需要的你。PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。
HTML 行内元素 与 块级元素
weixin_42012282的博客
04-23 485
目录 1.HTML 行内元素 与 块级元素 2.常用的 display 值 3.行内元素 和 块级元素 盒模型区别 4.块级元素 与 overflow 5.实践 1.HTML 行内元素 与 块级元素 行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素 只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和...
设置inline-block元素的overflow：hidden意外增加元素总体高度的问题
WEB前端娃——steiny
10-12 7222
来源1：https://my.oschina.net/u/214483/blog/663133 来源2：http://www.yidianzixun.com/home?page=article&id=0BwQmgTc 摘要: 设置inline-block元素的overflow：hidden意外增加元素总体高度的问题工作中遇到的一个问题，设置inline-block元素的overflow：hid
用了overflow：hidden后导航栏的高度变高了
weixin_30480651的博客
04-18 1079
如上图，蓝色框CSS代码如下： .navbar .navbar-collapse .navbar-right .welcome a:nth-child(2){ max-width: 180px; /* float: left;*/ overflow: hidden; white-space: nowrap; text-overflow: e...
ie9 overflow中hover scrollbar高度增高的bug
Tree3170 的专栏
10-30 1345
当我们制作表格的时候，有时候会遇到数据过长，列数过多，需要横向or纵向的滚动条的需求，我们一般的做法是 给这个表格的外层加一个 scroll_auto 的 div 并设置: /*css document*/ .scroll_auto{ width:100%; overflow:auto;} 套在table的外
overflow:hidden增加元素总体高度
a57521的博客
06-04 1043
解决办法： 给元素加上display: inline-block;和vertical-align: bottom 出现问题的示例： 原因可见转载: 但是只inline-block设为block有时不好使 设置inline-block元素的overflow：hidden意外增加元素总体高度的问题. ...
overfllow:hidden清除浮动并自动增高的原理
小柒的博客
04-28 2775
1.浏览器内核第一次渲染时，不会为父级设置任何高度，会事先渲染出子级模型并在渲染完毕后计算出子级模型的总高 2.当子级模型的总高计算完毕后，子级模型的高会被获取并对父级进行二次渲染，通过二次渲染完成父级的自动增高，二次渲染的高度即是子级的总高 ...
div不能自适应高度不能随图片的高度变化
09-25
当图片浮动或绝对定位时，它会脱离正常的文档流，这时元素的计算高度会将浮动或绝对定位的元素高度考虑进去，从而实现自适应。但是使用这种方法时，需要额外注意布局的细节处理，比如清除浮动，以避免布局错乱。 ...
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
2. **设定父元素固定高度**：当子元素高度确定且不变时，可以给父元素设定一个固定的高度。但这并不适用于高度动态变化的情况。 3. **使用额外的块级元素清除浮动**：在浮动子元素后面添加一个`<div>`，并设置`...
什么是高度塌陷 以及高度塌陷的解决办法
01-08
然而，这种方法的缺点在于它限制了父元素的高度自适应性，如果内容的多少发生变化，父元素可能会被溢出或者显示不完整。 2. **使用`overflow: hidden`**： 这个方法是通过在父元素上设置CSS属性`overflow: hidden`...
overflowhidden高度问题
weixin_38999134的博客
02-11 542
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position: absolute; width: 56%; 关键： position: absolute;
span标签使用display高度改变、float父辈元素塌陷问题
weixin_30952103的博客
12-09 335
span元素在使用display：inline-block 与overflow:hidden属性后，高度改变。 样式： .techno-content-detail-content span { display: inline-block; } .filelimit { overflow: hidden; text-ov...
当display:none;遇到overflow:hidden页面内容高矮不齐
qq_34720531的博客
03-07 1077
当display:none;遇到overflow:hidden;文本会高出一截 有两种方案： 所有的都使用overflow:hidden; 使用vertical-align: bottom，就可以解决。 这是为什么呢？因为overflow：hidden和display: inline-block一起使用时会造成baseline的移动，所以高度就变得不一样了使用vertical-align: b...
CSS3中overflow增长盒子高度的理解
cathline1117的博客
12-12 2641
关于html中overflow清除浮动增加盒子高度的理解 首先我们来了解overflow属性 1、Visible:overflow默认属性是Visible，一般没什么特别的理由来设置overflow属性的值为Visible，除非你自己想覆盖它在其他地方的值。它会将内容显示在盒子之外。 2、Hidden:该值会将超出盒子的所有内容覆盖掉，这对流动布局中溢出的内容很有用，可以隐藏看不见。 3、scro...
学习积累——BFC
qq_40674204的博客
10-14 282
今天在看文章的时候看到了一篇“为什么‘’overflow:hidden"能清除浮动的影响”的文章，作者的理解很到位讲解也很仔细。这篇文章也提到了一个我以前不怎么接触的概念“BFC”。也解决了我之前很多困惑，比如margin合并问题、overflow:hidden能清除浮动等。 BFC BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默...
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
大数据机器学习
05-12 1600
一. overflow:hidden溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。 二. overflow:hidden清除浮动 一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高...
解决用display:inline-block导致高度不一致问题
cooker_666的博客
11-30 5766
设置9宫格棋子的时候，通过给单独的square设置样式，原本是打算使用display;inline-block.来设计布局的。然后通过点击事件然后像square插入字体的时候发现了一旦插入，就会因为自动对齐字体底部导致高度变化。 .square{ display: inline-block; width: 80px; height: 80px; border: 1p...
理解CSS中 display:inline-block
滴水穿石的专栏
12-23 1440
内联元素display:inline内联元素特点：排列成一行，元素高、行高、顶部和底部边距不可控制，宽度随其内部文字或图片自动扩展，典型的如, , 等。块级元素 display:block块级元素特点：分行排列，默认宽度为父容器的宽度100%，高度，行高，顶部和底部边距可控制。内联块级元素display:inline-block内联块级元素是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。可以说兼备内联元素和块级元素的特点。排列成一行，高宽等都可控制。   对
CSS（overflow+高度塌陷问题+透明度+层级选择符+写前端项目的注意事项）
qq_40409416的博客
03-09 624
CSS复习 overflow 说明：声明如何处理溢出容器的内容（注意：只能对中文起作用） 属性： visible/hidden(隐藏)/scroll/auto(自动)/inherit(继承); visible: 默认值，内容不会被修剪，会出现在元素框之外； hidden： 内容会被修剪，并且其余内容是不可见的; scroll： 内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容; auto： 如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容; inh
css高度不随父元素
最新发布
03-15
<think>好的，我需要解决用户关于CSS中子元素高度不随父元素变化的问题。首先，我需要分析这个问题的可能原因和解决方法。根据用户提供的引用，尤其是引用[4]中提到使用clear类来清除浮动，这可能是关键点之一。 首先，常见的父元素高度坍塌问题通常是由于子元素浮动引起的。当子元素设置float后，父元素无法自动扩展高度，导致高度为0。解决方法包括使用清除浮动，比如在父元素末尾添加一个带有clear:both的空元素，或者使用overflow:hidden触发BFC（块级格式上下文）。 另外，引用[3]中的例子显示，父容器中的子元素设置了float: left，可能导致父元素高度坍塌。这时候，父元素需要清除浮动，可以通过在父元素中添加clearfix类，或者在父元素上设置overflow:auto或hidden。 还有一种情况是子元素使用绝对定位（position: absolute），如引用[1]提到，绝对定位的元素脱离文档流，父元素的高度不会包含它们。这时候需要确保父元素有相对定位（position: relative），并且可能需要手动设置父元素的高度，或者调整子元素的定位方式。 此外，检查父元素和子元素的高度设置是否正确。如果父元素的高度是固定值，子元素可能需要设置height:100%，但这也需要父元素的高度明确。或者使用Flexbox布局，设置父元素display:flex，这样子元素的高度可以自动填充。 总结可能的解决方案：1. 清除浮动；2. 使用BFC；3. 调整定位方式；4. 使用Flexbox或Grid布局；5. 设置明确的高度或百分比高度。需要根据具体情况选择合适的方法，并结合用户提供的引用中的代码示例进行说明。</think>### CSS中子元素高度不随父元素变化的解决方法 当子元素高度未跟随父元素变化时，通常由以下原因导致： 1. **浮动未清除** 若子元素使用`float`属性（如引用[3]中的示例），父元素会因高度坍塌无法包裹子元素。解决方法： - 在父元素末尾添加清除浮动的空元素： ```html <div class="parent"> <div class="child" style="float: left;">子元素</div> <div class="clear"></div> <!-- 清除浮动 --> </div> ``` ```css .clear { clear: both; } /* 引用[4]的clear类 */ ``` - 使用`overflow: hidden`触发BFC： ```css .parent { overflow: hidden; } ``` 2. **绝对定位脱离文档流** 若子元素使用`position: absolute`（如引用[1]），父元素需设置`position: relative`，并手动指定高度或通过内容撑开： ```css .parent { position: relative; } /* 引用[1]的相对定位 */ .child { position: absolute; bottom: 0; } ``` 3. **父元素高度未明确或百分比无效** 若子元素设置`height: 100%`，需确保父元素有明确高度（如固定值或通过`min-height`）： ```css .parent { height: 300px; } .child { height: 100%; } ``` 4. **使用Flexbox布局** Flex布局可自动调整子元素高度： ```css .parent { display: flex; /* 启用Flex布局 */ flex-direction: column; /* 垂直排列 */ } .child { flex: 1; } /* 占满剩余空间 */ ``` 5. **使用Grid布局** Grid布局类似Flex，但支持二维布局： ```css .parent { display: grid; grid-template-rows: 1fr; /* 行高自适应 */ } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值