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学习
电源管理组件 嵌入式系统低功耗管理的目的在于满足用户对性能需求的前提下，尽可能降低系统功耗以延长设备待机时间。 高性能与有限的电池能量在嵌入式系统中矛盾最为突出，硬件低功耗设计与软件低功耗管理的联合应用成为了解决矛盾的有效手段。 现在的各…...
前端面试题（二十五）｜附赠完整面试流程
📝📝今日分享：前端面试题系列继续更新啦！ 🤔🤔面试题是什么呢？这份前端面试题主要是上海某银行的中级前端面试题，面试时长属实没想到，挺短的！但从整个面试流程…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...
深入浅出Diffusion模型：从原理到实践的全方位教程
I. 引言：生成式AI的黎明 – Diffusion模型是什么？ 近年来，生成式人工智能（Generative AI）领域取得了爆炸性的进展，模型能够根据简单的文本提示创作出逼真的图像、连贯的文本，乃至更多令人惊叹的…...