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

css中的高度塌陷

news 2026/3/30 13:21:53

       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

从零开始构建你的渗透测试字典库：账号密码大字典与设备默认口令全解析

从零开始构建你的渗透测试字典库&#xff1a;账号密码大字典与设备默认口令全解析 在安全测试领域&#xff0c;一个高质量的字典库往往能决定渗透测试的效率上限。想象一下&#xff0c;当你面对一个需要爆破的系统时&#xff0c;手头拥有精准覆盖目标特征的字典&#xff0c;就…...

编程新知 2026/3/30 11:52:02

Onnxruntime模型量化实战：从PTQ到精度调优

1. Onnxruntime模型量化入门指南 第一次接触模型量化时&#xff0c;我也被各种术语搞得晕头转向。简单来说&#xff0c;量化就是把模型参数从32位浮点数转换为8位整数&#xff0c;就像把高清图片压缩成更小的文件。Onnxruntime作为业界领先的推理引擎&#xff0c;提供了完整的量…...

编程新知 2026/3/30 11:05:38

告别pip安装失败：在Jetson Nano（ARM64）上手动编译PyQt5 5.15.2的完整记录

在Jetson Nano&#xff08;ARM64&#xff09;上手动编译PyQt5 5.15.2的完整指南 当你在Jetson Nano这样的ARM64架构设备上尝试用pip安装PyQt5时&#xff0c;很可能会遇到各种兼容性问题。作为一款强大的Python GUI库&#xff0c;PyQt5在嵌入式开发中有着广泛的应用场景&#x…...

编程新知 2026/3/30 10:04:00

IBM System/4 Pi：航空航天计算机的兴衰与技术传奇

【导语&#xff1a;1981 年航天飞机首飞&#xff0c;其发射和大部分飞行环节由 IBM 的 System/4 Pi 系列 AP - 101B 计算机控制。该系列于 1967 年推出&#xff0c;广泛应用于航空航天等领域&#xff0c;虽发挥重要作用&#xff0c;但相关信息却较难获取。】System/4 Pi&#x…...

编程新知 2026/3/30 9:23:50

ChatGPT、Claude、Gemini大模型实战对比：哪个更适合你的业务场景？

ChatGPT、Claude、Gemini大模型实战对比&#xff1a;哪个更适合你的业务场景&#xff1f; 当企业面临AI大模型选型时&#xff0c;往往陷入技术参数的海洋却难以找到业务适配的答案。本文将从真实业务需求出发&#xff0c;通过客服对话、内容创作、数据分析三个典型场景的实测数…...

编程新知 2026/3/30 9:21:50

SDXL 1.0绘图工坊环境部署：Ubuntu+conda+4090驱动适配完整流程

SDXL 1.0绘图工坊环境部署&#xff1a;Ubuntuconda4090驱动适配完整流程 1. 环境准备与系统要求 在开始部署SDXL 1.0绘图工坊之前&#xff0c;需要确保你的硬件和软件环境满足以下要求&#xff1a; 硬件要求&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090&#xff08;24GB显…...

编程新知 2026/3/30 9:17:47

Madgwick算法详解：9轴IMU嵌入式姿态解算实战

1. Madgwick姿态解算算法库深度解析&#xff1a;面向9轴IMU的嵌入式实时姿态估计实现1.1 算法背景与工程定位Madgwick姿态解算算法由Sebastian Madgwick于2010年提出&#xff0c;是一种基于梯度下降优化的互补滤波器&#xff08;Complementary Filter&#xff09;&#xff0c;专…...

编程新知 2026/3/30 8:41:30

通义千问1.8B-Chat快速上手：vLLM部署+Chainlit界面实战体验

通义千问1.8B-Chat快速上手&#xff1a;vLLM部署Chainlit界面实战体验 1. 开篇&#xff1a;为什么选择这个组合&#xff1f; 如果你正在寻找一个轻量级但性能不俗的中文对话模型&#xff0c;通义千问1.8B-Chat绝对值得一试。这个1.8B参数的模型在保持较小体积的同时&#xff…...

编程新知 2026/3/30 7:39:06

OpenClaw压力测试：nanobot持续运行72小时稳定性

OpenClaw压力测试&#xff1a;nanobot持续运行72小时稳定性 1. 测试背景与目标 最近在本地部署了基于OpenClaw的nanobot项目&#xff0c;这是一个超轻量级的自动化助手框架。它内置了vllm部署的Qwen3-4B-Instruct-2507模型&#xff0c;通过chainlit提供推理界面。在实际使用中…...

编程新知 2026/3/30 6:58:55

Java异常体系全景解析：从Checked与Unchecked的本质区别到最佳实践

Java异常体系全景解析&#xff1a;从Checked与Unchecked的本质区别到最佳实践在Java的浩瀚生态中&#xff0c;异常处理机制无疑是构建健壮、可靠应用程序的基石。它不仅仅是简单的错误捕获&#xff0c;更是一套精密的契约系统&#xff0c;决定了程序在遭遇非预期状态时如何“表…...

编程新知 2026/3/30 6:14:49