当前位置： 首页 > news >正文

css中的高度塌陷

news 文章来源：https://blog.csdn.net/Lil_y1/article/details/141137798 2025/4/4 14:28:40

       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高度塌陷&#xff08;或称为高度坍塌&#xff09;是指在某些特定情况下&#xff0c;元素的高度无法被正确计算或显示的现象。这通常发生在具有浮动属性的元素或使用绝对定位的元素周围。 原因 高度塌陷通常发生在父元素包含着一个或多个浮动元素时。由于浮动元素被移出了正…...

编程日记 2024/8/16 13:13:14

怎样使用sudo的时候不需要输入密码？

在Ubuntu等Linux系统下&#xff0c;经常要在个人账户使用sudo命令来执行一些需要root权限的命令&#xff0c;但是需要输入该账户的密码&#xff0c;有时候显得很繁琐&#xff0c; 那么怎样使用sudo的时候不需要输入密码呢&#xff1f; 有如下两种方法&#xff1a; 常规方法1…...

编程日记 2024/8/16 13:11:12

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…...

编程日记 2024/8/16 13:09:10

YoloV8改进策略：Block改进|LeYOLO，一种用于目标检测的新型可扩展且高效的CNN架构|复现LeYolo，轻量级Yolo改进

摘要 LeYOLO是在YOLO系列&#xff0c;特别是可能受到YOLOv8启发的基础上进行的一系列改进&#xff0c;旨在提升目标检测模型的高效性、可扩展性和精度。其主要特点包括&#xff1a; 高效骨干网络缩放方法&#xff1a; LeYOLO借鉴了倒置瓶颈&#xff08;Inverted Bottleneck&am…...

编程日记 2024/8/16 13:08:09

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…...

编程日记 2024/8/16 13:06:06

记一次CSDN认证模块后端未校验漏洞

前言 作为一个程序员&#xff0c;一直充满好奇心&#xff0c;没事就喜欢找找漏洞&#xff0c;试想一下某些程序是否存在某些鉴权等漏洞&#xff0c;目前该漏洞已提交官方&#xff0c;且影响不大&#xff0c;现分享分析过程用于各位技术学习。 漏洞分析 https://i.csdn.net/#…...

编程日记 2024/8/16 13:04:04

【图机器学习系列】（一）图机器学习简介

微信公众号&#xff1a;leetcode_algos_life&#xff0c;代码随想随记 小红书&#xff1a;412408155 CSDN&#xff1a;https://blog.csdn.net/woai8339?typeblog &#xff0c;代码随想随记 GitHub: https://github.com/riverind 抖音【暂未开始&#xff0c;计划开始】&#xf…...

编程日记 2024/8/16 13:02:02

全网最详细，从一堆字符串，精确抓取想要日期时间的实战2.0

前言: 前面我们知道了&#xff0c;怎么从一堆带有中文、英文、日期时间的字符串里面抓取需要的日期时间&#xff0c;但是我们实现的只是抓取第一个日期时间&#xff0c;那我们怎么实现&#xff0c;抓取第二个&#xff0c;或者任一一个日期时间呢&#xff1f; 一、思路分析 1、数…...

编程日记 2024/8/16 12:58:59

24/8/15算法笔记 dp策略迭代 价值迭代

策略迭代&#xff1a; 策略迭代从某个策略开始&#xff0c;计算该策略下的状态价值函数。它交替进行两个步骤&#xff1a;策略评估&#xff08;Policy Evaluation&#xff09;和策略改进&#xff08;Policy Improvement&#xff09;。在策略评估阶段&#xff0c;计算给定策略下…...

编程日记 2024/8/16 12:56:57

【MMdetection改进】换遍MMDET主干网络之SwinTransformer-Tiny（基于MMdetection）

OpenMMLab 2.0 体系中 MMYOLO、MMDetection、MMClassification、MMSelfsup 中的模型注册表都继承自 MMEngine 中的根注册表&#xff0c;允许这些 OpenMMLab 开源库直接使用彼此已经实现的模块。 因此用户可以在MMYOLO 中使用来自 MMDetection、MMClassification、MMSelfsup 的主…...

编程日记 2024/8/16 12:55:56

FL Studio21.2.4最新中文版免费下载汉化包破解补丁

&#x1f389; FL Studio 21中文版新功能全解析&#xff01;让你的音乐制作更加高效&#xff01; 嘿&#xff0c;各位音乐制作的小伙伴儿们&#xff0c;今天我要安利一款你们绝对会爱上的神器——FL Studio 21中文版&#xff01;这款软件不仅功能强大&#xff0c;而且操作简便…...

编程日记 2024/8/16 12:54:55

私域场景中的数字化营销秘诀

​在当今的商业世界&#xff0c;私域场景的营销变得愈发重要。今天咱们就来深入探讨一下私域场景中的几个关键营销手段。 一、会员管理与营销 企业一旦拥有完善的会员体系&#xff0c;数字化手段就能大放异彩。它可以助力企业对会员进行精细划分&#xff0c;深度了解会员的消费…...

编程日记 2024/8/16 12:53:54

一键换肤（Echarts 自定义主题）

一键换肤&#xff08;Echarts 自定义主题&#xff09; 一、使用官方主题配置工具 官方主题配置工具&#xff1a;https://echarts.apache.org/zh/theme-builder.html 如果以上主题不满足使用&#xff0c;可以自己自定义主题 例如&#xff1a;修改背景、标题等&#xff0c;可…...

编程日记 2024/8/16 12:52:53

Unity 6 预览版正式发布

Unity 6 预览版发布啦&#xff0c;正式版本将于今年晚些时候正式发布&#xff01; 下载链接&#xff1a; https://unity.com/releases/editor/whats-new/6000.0.0 Unity 6 预览版是 Unity 6 开发周期的最后一个版本&#xff0c;在去年 11 月 Unite 大会上&#xff0c;我们宣…...

编程日记 2024/8/16 12:49:51

如何跳过极狐GitLab 密钥推送保护功能？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门面向中国程序员和企业提供企业级一体化 DevOps 平台&#xff0c;用来帮助用户实现需求管理、源代码托管、CI/CD、安全合规&#xff0c;而且所有的操作都是在一个平台上进行&#xff0c;省事省心省钱。可以一键安装极狐GitL…...

编程日记 2024/8/16 12:46:48

Android高版本抓包总结

方案1 CharlesVirtualXposedJustTrustMe 推荐使用三星手机此方案 VirtualXposed下载链接&#xff1a;https://github.com/android-hacker/VirtualXposed/releases JustTrustMe下载链接&#xff1a;https://github.com/Fuzion24/JustTrustMe/releases/ 下载完成后使用adb命令…...

编程日记 2024/8/16 12:45:47

《AI视频类工具之五——​ 开拍》

一.简介 官网：开拍 - 用AI制作口播视频用AI制作口播视频https://www.kaipai.com/home?ref=ai-bot.cn 开拍是一款由美图公司在2023年推出，利用AI技术制作的短视频分享应用。这款工具通过AI赋能，为用户提供了从文案创作、视频拍摄到视频剪辑、包装的一站式解决方案，极大地…...

编程日记 2024/8/16 12:44:46

面试经典算法150题系列-最后一个单词的长度

最后一个单词的长度 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 1&#xff1a; 输入&#xff1a;s "Hello World&qu…...

编程日记 2024/8/16 12:42:44

RTT学习

电源管理组件 嵌入式系统低功耗管理的目的在于满足用户对性能需求的前提下&#xff0c;尽可能降低系统功耗以延长设备待机时间。 高性能与有限的电池能量在嵌入式系统中矛盾最为突出&#xff0c;硬件低功耗设计与软件低功耗管理的联合应用成为了解决矛盾的有效手段。 现在的各…...

编程日记 2024/8/16 12:41:43

前端面试题（二十五）｜附赠完整面试流程

&#x1f4dd;&#x1f4dd;今日分享&#xff1a;前端面试题系列继续更新啦&#xff01; &#x1f914;&#x1f914;面试题是什么呢&#xff1f;这份前端面试题主要是上海某银行的中级前端面试题&#xff0c;面试时长属实没想到&#xff0c;挺短的&#xff01;但从整个面试流程…...

编程日记 2024/8/16 12:40:41

【分布式系统】关于主流的几款分布式链路追踪工具

Jaeger 标准化与兼容性&#xff1a; Jaeger 支持 OpenTracing 和 OpenTelemetry 标准&#xff0c;这意味着它可以与各种微服务架构和应用框架无缝集成&#xff0c;提供了广泛的兼容性和灵活性。 数据存储选项&#xff1a; Jaeger 支持多种数据存储后端&#xff0c;如 Cassandra…...

编程日记 2024/8/16 12:35:36

【吸引力法则】探究人生欲：追求深度体验与宇宙链接

文章目录 什么是人生欲&#xff1f;唤醒人生欲&#xff1a;克服配得感的三大障碍1 第一大障碍&#xff1a;法执的压制2 第二大障碍&#xff1a;家庭的继承2.1 家庭创伤的代际传递2.2 家庭文化基因的传递2.2.1 “成年人最大的美德是让自己的生活过得更加精彩。”2.2.2 荷欧波诺波…...

编程日记 2024/8/16 12:31:31

REST framework-通用视图[Generic views]

Django’s generic views… were developed as a shortcut for common usage patterns… They take certain common idioms and patterns found in view development and abstract them so that you can quickly write common views of data without having to repeat yourself…...

编程日记 2024/8/16 12:27:27

行驶证OCR识别接口如何用Java调用

一、什么是行驶证OCR识别接口&#xff1f; 传入行驶证照片&#xff0c;行驶证图片上的文字信息&#xff0c;返回包括所有人、品牌型号、住址、车牌号、发动机号码、车辆识别代号、注册日期、发证日期等信息。 行驶证 OCR 接口的主要作用是代替手动输入&#xff0c;提高信息录…...

编程日记 2024/8/16 12:26:26

8月15日笔记

masscan安装使用 首先需要有c编译器环境。查看是否有c编译器环境&#xff1a; gcc -v如果系统中已经安装了 GCC&#xff0c;这个命令将输出 GCC 的版本信息。如果未安装&#xff0c;你会看到类似于 “command not found” 的错误消息。 如果没有下载&#xff0c;使用如下命令…...

编程日记 2024/8/16 12:24:24

CSS3 圆角

CSS3 圆角 引言 在网页设计中&#xff0c;圆角矩形是一种常见的设计元素&#xff0c;它们为页面带来了柔和的视觉体验。随着CSS3的推出&#xff0c;实现圆角矩形变得异常简单&#xff0c;无需依赖图片或复杂的JavaScript代码。本文将详细介绍CSS3中用于创建圆角矩形的border-…...

编程日记 2024/8/16 12:23:23

VUE项目中main.js中不能使用 @引入路径吗

VUE项目中main.js中不能使用 引入路径吗 vite.config已经配置了别名 但是在main.js中直接引入报错 修改成 相对路径后&#xff0c;保存消失 找到原因&#xff1a;vite.config 漏了引入 import { defineConfig } from ‘vite’ import vue from ‘vitejs/plugin-vue’ 导致…...

编程日记 2024/8/16 12:20:20

Spring日志

1.日志的作用 定位和发现问题(主要)系统监控数据采集日志审计...... 2.日志的使用 2.1 ⽇志格式的说明 2.2 打印日志 Spring集成了日志框架,直接使用即可 步骤: 1.定义日志对象 2.使⽤⽇志对象打印⽇志 RestController public class LoggerController {private static Logger…...

编程日记 2024/8/16 12:18:18

年薪30万+，TOP大厂月薪10万+....网络安全工程师凭什么？

时代飞速发展&#xff0c;我们的工作、生活乃至整个社会的运转都越来越依赖于网络。也因此&#xff0c;网络的无处不在带来了前所未有的安全风险。 从个人隐私泄露到企业机密被盗&#xff0c;再到国家关键基础设施遭受攻击&#xff0c;网络安全问题无处不在&#xff0c;威胁着…...

编程日记 2024/8/16 12:15:15

WebView 的常见的安全漏洞：

WebView 可能存在以下一些常见的安全漏洞&#xff1a; 跨站脚本攻击&#xff08;XSS&#xff09;&#xff1a;恶意脚本可能通过网页注入到 WebView 中&#xff0c;从而获取用户数据或执行其他恶意操作。 跨站请求伪造&#xff08;CSRF&#xff09;&#xff1a;攻击者可能诱导 …...

编程日记 2024/8/16 12:13:13