css中的高度塌陷
CSS高度塌陷（或称为高度坍塌）是指在某些特定情况下，元素的高度无法被正确计算或显示的现象。这通常发生在具有浮动属性的元素或使用绝对定位的元素周围。
原因
高度塌陷通常发生在父元素包含着一个或多个浮动元素时。由于浮动元素被移出了正常的文档流，父元素无法正确计算其高度，导致父元素高度塌陷。
产生高度塌陷的原因通常有两种情况:
- 子元素使用了浮动或者绝对定位，导致父元素无法计算出子元素的高度。
- 当父元素的高度没有设置时，父元素的高度会自动调整为0，从而导致子元素的高度也变为0。
<style>.father{border: 1px solid;}.son{width: 100px;height: 100px;background-color: red;/* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 *//* position: absolute; */float: left; }</style><body><div class="father"><div class="son"></div></div>
</body>页面显示
如何解决？
使父元素也脱离文档流
使用浮动布局：将父元素也设置为浮动，这样它会自动计算和包含浮动元素的高度。
.father{border: 2px solid blue;/* 使父元素也脱离文档流 */float: left;}.son{width: 100px;height: 100px;background-color: red;/* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 *//* position: absolute; */float: left; } 
当子元素是因为浮动的原因产生问题的时候，我们也可以使用 overflow: hidden 来解决
overflow: hidden;
清除浮动(推荐)
在浮动元素后面添加一个带有clear属性的空元素，使其在浮动元素下面，从而触发父元素重新计算高度。在父元素上添加 clearfix 类名，并在需要清除浮动的子元素前添加一个带clearfix::after伪元素的样式。
.clearfix::after {content: "";display: table;clear: both;
}<div class="father clearfix"><div class="son"></div>
</div>
使用flex布局
使用flexbox布局可以自动解决高度塌陷问题。
.father {border: 2px solid blue;display: flex;
}
以上是一些常见的解决高度塌陷问题的方法，具体应该根据实际情况选择适合的方法,还有哪些方法呢 欢迎补充。
相关文章：
css中的高度塌陷
CSS高度塌陷（或称为高度坍塌）是指在某些特定情况下，元素的高度无法被正确计算或显示的现象。这通常发生在具有浮动属性的元素或使用绝对定位的元素周围。 原因 高度塌陷通常发生在父元素包含着一个或多个浮动元素时。由于浮动元素被移出了正…...
怎样使用sudo的时候不需要输入密码？
在Ubuntu等Linux系统下，经常要在个人账户使用sudo命令来执行一些需要root权限的命令，但是需要输入该账户的密码，有时候显得很繁琐， 那么怎样使用sudo的时候不需要输入密码呢？ 有如下两种方法： 常规方法1…...
kettle的Javascript组件获取T-1天和T+1天
// 获取T-1的时间 var currentDate new Date(); currentDate.setDate(currentDate.getDate() - 1); var currentYear currentDate.getFullYear(); var currentMonth (0 (currentDate.getMonth() 1)).slice(-2); var currentDay (0 currentDate.getDate()).slice(-2); va…...
YoloV8改进策略：Block改进|LeYOLO，一种用于目标检测的新型可扩展且高效的CNN架构|复现LeYolo，轻量级Yolo改进
摘要 LeYOLO是在YOLO系列，特别是可能受到YOLOv8启发的基础上进行的一系列改进，旨在提升目标检测模型的高效性、可扩展性和精度。其主要特点包括： 高效骨干网络缩放方法： LeYOLO借鉴了倒置瓶颈（Inverted Bottleneck&am…...
ODX（Open Diagnostic Data Exchange）简介
ODX（Open Diagnostic Data Exchange）是一种由ASAM制定的开放标准，用于描述和交换ECU（电子控制单元）诊断数据，广泛应用于车辆诊断。ODX文件采用XML格式，包含通讯参数，如ISO15765-2/3时间参数。 ASAM（Association for Standardisation of Automation and Measuring Syst…...
记一次CSDN认证模块后端未校验漏洞
前言 作为一个程序员，一直充满好奇心，没事就喜欢找找漏洞，试想一下某些程序是否存在某些鉴权等漏洞，目前该漏洞已提交官方，且影响不大，现分享分析过程用于各位技术学习。 漏洞分析 https://i.csdn.net/#…...
【图机器学习系列】（一）图机器学习简介
微信公众号：leetcode_algos_life，代码随想随记 小红书：412408155 CSDN：https://blog.csdn.net/woai8339?typeblog ，代码随想随记 GitHub: https://github.com/riverind 抖音【暂未开始，计划开始】…...
全网最详细，从一堆字符串，精确抓取想要日期时间的实战2.0
前言: 前面我们知道了，怎么从一堆带有中文、英文、日期时间的字符串里面抓取需要的日期时间，但是我们实现的只是抓取第一个日期时间，那我们怎么实现，抓取第二个，或者任一一个日期时间呢？ 一、思路分析 1、数…...
24/8/15算法笔记 dp策略迭代 价值迭代
策略迭代： 策略迭代从某个策略开始，计算该策略下的状态价值函数。它交替进行两个步骤：策略评估（Policy Evaluation）和策略改进（Policy Improvement）。在策略评估阶段，计算给定策略下…...
【MMdetection改进】换遍MMDET主干网络之SwinTransformer-Tiny（基于MMdetection）
OpenMMLab 2.0 体系中 MMYOLO、MMDetection、MMClassification、MMSelfsup 中的模型注册表都继承自 MMEngine 中的根注册表，允许这些 OpenMMLab 开源库直接使用彼此已经实现的模块。 因此用户可以在MMYOLO 中使用来自 MMDetection、MMClassification、MMSelfsup 的主…...
FL Studio21.2.4最新中文版免费下载汉化包破解补丁
🎉 FL Studio 21中文版新功能全解析！让你的音乐制作更加高效！ 嘿，各位音乐制作的小伙伴儿们，今天我要安利一款你们绝对会爱上的神器——FL Studio 21中文版！这款软件不仅功能强大，而且操作简便…...
私域场景中的数字化营销秘诀
在当今的商业世界，私域场景的营销变得愈发重要。今天咱们就来深入探讨一下私域场景中的几个关键营销手段。 一、会员管理与营销 企业一旦拥有完善的会员体系，数字化手段就能大放异彩。它可以助力企业对会员进行精细划分，深度了解会员的消费…...
一键换肤（Echarts 自定义主题）
一键换肤（Echarts 自定义主题） 一、使用官方主题配置工具 官方主题配置工具：https://echarts.apache.org/zh/theme-builder.html 如果以上主题不满足使用，可以自己自定义主题 例如：修改背景、标题等，可…...
Unity 6 预览版正式发布
Unity 6 预览版发布啦，正式版本将于今年晚些时候正式发布！ 下载链接： https://unity.com/releases/editor/whats-new/6000.0.0 Unity 6 预览版是 Unity 6 开发周期的最后一个版本，在去年 11 月 Unite 大会上，我们宣…...
如何跳过极狐GitLab 密钥推送保护功能？
极狐GitLab 是 GitLab 在中国的发行版，专门面向中国程序员和企业提供企业级一体化 DevOps 平台，用来帮助用户实现需求管理、源代码托管、CI/CD、安全合规，而且所有的操作都是在一个平台上进行，省事省心省钱。可以一键安装极狐GitL…...
Android高版本抓包总结
方案1 CharlesVirtualXposedJustTrustMe 推荐使用三星手机此方案 VirtualXposed下载链接：https://github.com/android-hacker/VirtualXposed/releases JustTrustMe下载链接：https://github.com/Fuzion24/JustTrustMe/releases/ 下载完成后使用adb命令…...
《AI视频类工具之五—— 开拍》
一.简介 官网：开拍 - 用AI制作口播视频用AI制作口播视频https://www.kaipai.com/home?ref=ai-bot.cn 开拍是一款由美图公司在2023年推出，利用AI技术制作的短视频分享应用。这款工具通过AI赋能，为用户提供了从文案创作、视频拍摄到视频剪辑、包装的一站式解决方案，极大地…...
面试经典算法150题系列-最后一个单词的长度
最后一个单词的长度 给你一个字符串 s，由若干单词组成，单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 1： 输入：s "Hello World&qu…...
RTT学习
电源管理组件 嵌入式系统低功耗管理的目的在于满足用户对性能需求的前提下，尽可能降低系统功耗以延长设备待机时间。 高性能与有限的电池能量在嵌入式系统中矛盾最为突出，硬件低功耗设计与软件低功耗管理的联合应用成为了解决矛盾的有效手段。 现在的各…...
前端面试题（二十五）｜附赠完整面试流程
📝📝今日分享：前端面试题系列继续更新啦！ 🤔🤔面试题是什么呢？这份前端面试题主要是上海某银行的中级前端面试题，面试时长属实没想到，挺短的！但从整个面试流程…...
一次搞懂内存取证：用Volatility3和Cobalt Strike分析工具复现VNCTF‘来一把紧张刺激的CS’
实战内存取证：从Volatility3到Cobalt Strike信标分析全解析 在网络安全事件响应中，内存取证往往是发现高级威胁的最后一道防线。当攻击者使用文件无落地的技术时，传统的磁盘取证可能一无所获，而内存中却保留着攻击行为的完整痕迹。…...
双系统Ubuntu磁盘告急？别重装！用GParted无损扩容保姆级教程（附U盘启动盘制作）
双系统Ubuntu磁盘告急？别重装！用GParted无损扩容保姆级教程（附U盘启动盘制作）当你在Windows和Ubuntu双系统环境下工作时，是否遇到过这样的窘境：当初安装时给Ubuntu分配的空间捉襟见肘，而Windows…...
AI IDE 革命：程序员正在被重新定义
很多开发者第一次使用 Cursor 的 CtrlK 或 Composer（高级多文件编辑模式）时，都会有一种强烈的、甚至让人有些脊背发凉的冲击感。 因为： 它已经不再是那个我们熟悉的、只能在原地等待光标落下的： “代码自动补全插件&am…...
ZMJS，把 JavaScript 解释器放进 SAP ABAP 应用服务器之后，很多扩展思路会变得不一样
我今天看这个 oisee/zmjs 仓库时，最吸引人的不是它把 JavaScript 语法做进了 ABAP，而是它选择了一条非常 SAP 的路线，纯 ABAP、无外部依赖、无 Kernel Module、以类和接口的形式运行在 SAP 应用服务器内部。仓库自己的定位很直接，ZMJS 是一个面向 SAP ABAP 的 Mini JavaScr…...
基于MAX78000与CNN的智能螺栓巡检小车：嵌入式AI实战解析
1. 项目概述与核心思路在轨道交通的日常运维中，螺栓的紧固状态检查是一项繁重且关键的任务。无论是轨道上的紧固螺栓，还是列车转向架、轮对轴承上的关键螺栓，其松动或失效都可能引发严重的安全事故。传统的人工巡检方式不仅效率低下ÿ…...
想深耕网络安全行业，这些必备条件缺一不可
网络空间的攻防对抗日益激烈，网络安全已成为企业生存和国家安全的命脉，它负责构筑数字世界的坚固防线，保护核心资产与用户隐私免受侵害。 想要成为一名优秀的网络安全专家，除了敏锐的安全意识和高度的责任感，更需要锤…...
Taotoken的Token Plan套餐如何帮助项目更可控地预估成本
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken的Token Plan套餐如何帮助项目更可控地预估成本 对于项目管理者或独立开发者而言，在集成大模型能力时…...
3大突破性功能：用HiveWE革新你的魔兽争霸III地图创作体验
3大突破性功能：用HiveWE革新你的魔兽争霸III地图创作体验 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 还在为传统魔兽争霸III编辑器缓慢的加载速度和复杂的操作界面而烦恼吗？Hive…...
实战教程：5步构建基于YOLOv5的FPS游戏智能瞄准系统
实战教程：5步构建基于YOLOv5的FPS游戏智能瞄准系统 【免费下载链接】FPSAutomaticAiming 基于yolov5的FPS游戏AI。 项目地址: https://gitcode.com/gh_mirrors/fp/FPSAutomaticAiming FPSAutomaticAiming是一个基于YOLOv5深度学习算法的FPS游戏自动瞄准系统&…...
茉莉花插件：如何让中文文献管理效率提升300%
茉莉花插件：如何让中文文献管理效率提升300% 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件，用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum 还在为中文文献的元数据抓…...