- 综合排序
- 最热优先
- 最新优先
- 来自专栏李蔚蓬的专栏
文档流code案例小汇【处理高度塌陷】
clear mdn文档 clear只是清除浮动，不能缓解【高度塌陷】 https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear 值 none none left right both 解决塌陷 https://codesandbox.io/s/funny-water-4oh3p7?file=/index.html <! IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>高度塌陷
58730编辑于 2023-01-12 - 来自专栏Coxhuang
CSS Margin塌陷（重叠）
CSS Margin塌陷（重叠） #1 说明 #1.1 什么是Margin塌陷 在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的 margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。 注意: 两个盒子的垂直外边距完全接触才会触发 #1.2 塌陷情况有几种? 子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。
2K30发布于 2020-11-09 - 来自专栏WflynnWeb
css面试点三：清除浮动的九中方法-高度塌陷理解-伪元素使用
浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局 当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。 当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。 高度塌陷 如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。 那么它的高度就会塌缩为零 解决方法： 1.父级div定义伪类：after和zoom 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用
<div class1.5K20编辑于 2022-10-28来自专栏前端二次元巧用浮动布局、解决高度塌陷实例分享|技术创作特训营第一期
浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。浮动元素的特性包括：浮动元素会脱离标准流(脱标)。浮动的元素会一行内显示并且元素顶部对齐。 高度塌陷当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。**怎么解决呢？**图片给父div加overflow: hidden清除浮动。 当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。 【创作提纲】1、浮动的特征和绝妙的应用场景2、overflow: hidden样式的清除浮动，解决高度塌陷3、flex布局4、代码更加优雅！
47911编辑于 2023-08-13</body> </html> 此时运行结果 可以看到子元素并没有离父元素上边距10px而是使整个父盒子塌陷了 10px 这里的解决办法有 给父元素设置border-top 给父元素定义内边距 父元素加overflow:hidden 需要注意的是浮动的盒子不会存在外边距合并塌陷的问题来自专栏生如夏花绚烂外边距合并嵌套块元素塌陷问题
93320编辑于 2022-09-08 - 来自专栏前端Q
理解 margin 塌陷和 margin 合并及其解决方案
今天我们来总结两个不起眼的小问题：margin塌陷和margin合并 margin塌陷 什么是margin塌陷 我们先来看个例子，然后引出什么是margin塌陷 需求：在父子元素中，通过marigin让父元素相对左边及顶部各距离 这种现象被称之为margin塌陷。但很多人可能都不太理解，为什么叫它塌陷？ 其实你可以这样理解，如上述例子，原本子元素要距离父元素顶部50px，现在没有了，也就是父元素的顶棚对子元素来说没有作用，相当于没有，相当于塌陷下来了。所以叫margin塌陷。 但是有的时候我们不希望有这样的问题，那我们如何解决margin塌陷的问题呢？ 答案是，我们可以通过触发BFC来解决！那是什么是BFC呢？ 因为margin合并和margin塌陷不一样，margin塌陷只添加了CSS，margin合并除了添加CSS，还修改了HTML结构。
1.1K40发布于 2021-07-27 - 来自专栏前端面试秘籍
编程篇(010)-如何解决数组塌陷问题
什么叫数组塌陷？ 一个数组在进行删除数据单元操作的时候，删除掉这个单元之后，后面的数据单元会自动的补充的这个位置上来，造成数组长度的减少，这种情况被称之为数组塌陷。 如何解决数组塌陷问题呢？
46810编辑于 2022-05-12 - 来自专栏pangguoming
div 自适应高度 自动填充剩余高度
方案1： Html：
CSS： html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: re头部DIV下部DIV6.2K40发布于 2018-03-07 - 来自专栏全栈程序员必看
overflow:hidden作用能治住塌陷_html溢出隐藏代码
，高度由随内容增加自适应高度。 当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。 ，下面的元素会顶上去，造成页面的塌陷。 因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。 父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，如下： /*css样式*/ <style type="text/css"> .box{
2.5K30编辑于 2022-11-15 - 来自专栏燧机科技-视频AI智能分析
桥梁塌陷边坡落石识别系统
一、引言 我国山区公路桥梁占比超55%，边坡落石、塌陷、泥石流等地质灾害年均发生超1800起（《2024年全国交通基础设施安全蓝皮书》）。 本文提出一种基于YOLOv11目标检测与CNN特征增强的智能识别监测预警系统，通过“多源感知-特征融合-分级联动预警”机制，实现对桥梁塌陷（裂缝＞5cm）、边坡落石（直径＞15cm）、泥石流滑坡（流速＞ backbone，提取灾害目标的纹理（如落石棱角、裂缝走向）、形态特征（如泥石流扇形堆积），输出32维特征向量，通过SVM分类器判断“低风险（裂缝＜3cm）/中风险（落石直径15-30cm）/高风险（桥梁局部塌陷 features = self.backbone(x) return self.classifier(features)实测数据（某边坡试点2个月记录）：模型对“高风险（桥梁塌陷 四、系统工作流程与核心优势 （一）全流程闭环预警机制 实时监测：相机每33ms采集一帧图像，边缘节点并行执行YOLOv11检测、CNN风险分级、多源数据融合； 分级告警： 一级告警（高风险：桥梁塌陷、大型落石
21210编辑于 2025-12-31 - 来自专栏全栈程序员必看
iframe的高度自适应_div自适应高度
如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。 而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。 方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。 如果层展开，则会撑高页面高度。 可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。
8.8K40编辑于 2022-11-04 - 来自专栏全栈程序员必看
关于ViewPager高度自适应（随着pager页的高度改变Viewpager的高度）
viewpager的高度。 解决了冲突问题，但你会遇到这样一个棘手的问题：所有viewpager中的fragment都是那个最大的高度，如果你的fragment中view的高度很小的话，或者view的高度过大的话，会导致自身或者其他 ，从代码中可以看出在调用resetHeight（）方法中传入实参current后，viewpager的高度会变成你传入实参对应下标的fragment的高度，那么在哪里调用这个方法呢？ （ 这是因为高版本中viewpager有改动，并不知道有什么改动，觉得是预加载的改动）对的，高度不对应，就是你viewpager中的fragment不是自己本身的高度，可能是其他fragment的高度 fragment的高度，（因为预加载到第三个）第一你们第二个fragment的高度是你 第一个fragment的高度（预加载到第一个），以此类推。
5.9K30编辑于 2022-09-15 - 来自专栏乐行僧的博客
推导B树的最大高度和最小高度得出B树的高度范围
前提条件：n>=1，则对于任意一棵包含n个关键字、高度为h、阶数为m的B树。 一、最小高度： 对于任意树类型的数据结构，如果其每层节点能够分布的足够满，其高度也会随之变得足够的低。 代表向上取整)： //根节点 儿子节点个数[2, m] 关键字个数[1, m-1] //非根节点 儿子节点个数[ceil(m/2), m] 关键字个数[ceil(m/2)-1, m-1] 为了使得B树高度最低 ，也就是每层的节点数达到最大，看如下的计算过程： 二、最大高度： 要使得B树的高度达到最大，也就意味着在每个节点中，关键字的个数达到最小，这样在容纳相同个数的关键字的B树中，其高度可以达到最大。 有了上边我们对最小关键字大小把控，下面来推到B树的最大高度： 总结： 由一和二可知，通过寻找B树的两种极限的存在，推出B树的高度范围为：logm(n+1)<= h <=log(ceil(m/2
4.5K10编辑于 2022-02-24 - 来自专栏Devops专栏
盒模型使用margin相关技巧及解决margin-top塌陷问题
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 margin-top 塌陷 在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下： 1、外部盒子设置一个边框 2、外部盒子设置 这就是传说之中的margin-top塌陷现象。 那么怎么解决呢？
1.8K20发布于 2019-05-31 - 来自专栏全栈程序员必看
页面的高度设置_word页面高度在哪设置
100%}；另外，其他的容器也需要设置height:100%才能达到预期的目的 问题2： ie6下table在table-layout: fixed下，行高不能自动充满 解决：将需要自动充满的行高的高度设置为 100%，即height=100% 问题3：设置doctype后table内部的div高度100%不好使 解决：在这种模式下，需要用具体的高度值进行设置，目前未找到其他方法 发布者：全栈程序员栈长，转载请注明出处
3.3K20编辑于 2022-09-19 - 来自专栏前端资源
根据获取内部元素的高度，设置iframe的高度
iframe 是一个非常迷得一个元素，很难直接获取其内部元素的高度。 下面分享一个方法，可以获取 iframe 内部元素的高度： function setIframeHeight(id){ try{ var iframe = document.getElementById
11.7K20发布于 2019-11-13 - 来自专栏从零开始学 Web 前端
textarea内容自动撑开高度，实现高度自适应
但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。 然后有些时候，为了用户体验，我们需要让它的高度随着文本内容的高度而动态变化。 发微博的输入框会检测输入内容的高度，如果超出的预设的高度，会随着文本的高度的增加而增加，当文本高度减少的时候，文本框的高度也会随着减少。 今天，就来尝试自己实现这个功能。 实现思路 方法一 首先想到的方法就是通过js检测文本的高度，然后动态设置文本框的高度。 这是我的第一想法，也是最容易实现的想法。 具体思路：当出现滚动条的时候，文本的实际高度就是**scrollHeight**，我们只需要设置文本框的高度为内容的**scrollHeight**即可。 代码实现： <! ，那么 textarea 的高度自然就是其中文字内容的高度了。
30.7K50发布于 2021-07-01 - 来自专栏前端小叙
内层图片元素高度自适应，外层盒子高度如何保持跟图片高度一致？
在开发的过程中，外层盒子高度不确定的情况下，想要跟内层图片高度保持一致，内层图片高度设为width:100%;height:auto;外层box高度也是width:100%;height:auto.为什么会比图片本身到高度超出去一部分呢 外层box如何可以跟内层不确定高度的图片高度保持一致呢？ <!
1.4K30编辑于 2023-03-25 - 来自专栏前端之旅
CSS 基础系列：从清除浮动和margin塌陷问题谈BFC
1.清除浮动 浮动的元素会影响其兄弟元素的位置，并可能导致父元素的高度塌陷（假如父元素没设置高度），因此需要清除浮动（带来的影响）。 父元素高度塌陷的情况：子元素浮动后脱离了文档流，未设置高度的父元素在形式上表现为 0 高度，设置了 clear:both 的元素为了满足其左右两边没有浮动元素的这个条件，只能自身下移，从而带动了父元素高度的撑开 2.margin 塌陷 文档流内，块级元素与块级元素在垂直方向上的 margin 有时会合并（塌陷）为单个 margin，这样的现象称之为 margin 塌陷（margin collapse）。 前面我们说过 BFC 可以用于解决 margin 塌陷问题。 同样地，如果是父子嵌套的 margin 塌陷问题，只需要触发父元素的 BFC 即可。
3.1K10发布于 2019-11-07 - 来自专栏全栈程序员必看
iframe自适应高度_iframe根据内容自适应高度
1、iframe自适应页面高度 首先需要给iframe设置一个id，不需要滚动条则加上scrolling=”no” 然后加上一个onload事件 function iFrameHeight id="compInfo" frameborder='0'scrolling="no" οnlοad="iFrameHeight(this)"></iframe> 2、若需要iframe固定一个高度 ，超过这个高度才自适应 function iFrameHeightContact(iframe) { var ifm= document.getElementById(iframe.id); ' id="compInfo" frameborder='0'scrolling="no" οnlοad="iFrameHeight(this)"></iframe> * 400则为你想要固定的高度
6.4K30编辑于 2022-11-08
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号