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

CSS之高度塌陷和外边距塌陷

news 2025/7/7 22:39:48

目录

1.高度塌陷（原因，如何解决）

【概念介绍】

【解决办法】

【概念介绍-BFC】

【拓展-BFC的触发条件】

2.外边距塌陷 （原因，如何解决）

【概念介绍】

【两种情况】

1.相邻块元素

2.嵌套块元素

【解决办法】

一、相邻块元素

二、嵌套块元素

总结：

1.高度塌陷（原因，如何解决）

【概念介绍】

高度塌陷：子元素设置浮动后就会脱标(脱离标准流进入浮动流)，如果此时父元素没有设置高度，那么父元素高度就会为0，形成所谓的父元素高度塌陷现象

引发的后果：浮动的子元素会对页面的布局造成影响，需要清除浮动。由此得出，解决高度塌陷的本质是清除浮动造成的影响

【图示】

子元素浮动前:

img

子元素浮动后：

img

【解决办法】

（1）给父元素一个高度

做法：直接计算出父元素的高度，给父元素定高

缺点：当子元素过多的时不好计算

（2）利用BFC解决

（3）清除浮动造成的影响

做法：清除浮动的方法

详情请看：清除浮动的方法有哪些

【概念介绍-BFC】

BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是页面中的一块渲染区域，有自己的渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

其特性之一：bfc中的浮动元素参与bfc的高度计算，所以可以将父元素变为bfc模式，解决高度塌陷

做法：

a.给父元素设置浮动（此时父元素有高度，但是父元素本身也脱标了，会产生其它的布局问题）

b.给父元素的显示模式设置为inline-block、table-cell、table-caption、flex、inline-flex

c.给父元素overflow设置为非visible(常见做法就是overflow:hidden)

d.设置绝对定位和固定定位

【拓展-BFC的触发条件】
 1、根元素（<html>）2、float值非none3、overflow值非visible4、display值为inline-block、table-cell、table-caption、flex、inline-flex5、position值为absolute、fixed

2.外边距塌陷 （原因，如何解决）

【概念介绍】

垂直方向上的两个块级元素外边距出现了合并的现象，就叫外边距塌陷(水平方向上的元素没有外边距塌陷现象)

【两种情况】

垂直相邻块元素和嵌套块元素 都会产生该现象

【图示】

1.相邻块元素

img

2.嵌套块元素

img

【解决办法】
一、相邻块元素

（1）不用margin，选用padding

操作：让其中某个元素的margin变成padding，因为padding不存在塌陷

（2）中间加个空标签隔开

操作：让空标签的高度为两者margin之和

（3）只给一个元素设置margin

操作：只给其中一个元素设置margin，就不存在外边距塌陷了

（4）改变元素的显示模式

操作：改变其中一个块元素的显示模式为行内块元素

缺点：改变了元素的显示模式，可能产生其它的问题

二、嵌套块元素

（1）更改元素显示模式。

操作：改变其中一个块元素的显示模式为行内块元素

缺点：改变了元素的显示模式，可能产生其它的问题

（2）更改元素的文档流。

操作：给其中一个元素设置浮动，脱离标准流，就能解决

缺点：脱标元素会对后面的元素造成影响

（3）给父元素设置溢出隐藏 （推荐）

操作：设置overflow：hidden

（4）给父元素设置（上）内padding

操作：给父元素设置一个上内边距，使其和子元素保持距离

缺点：可能造成其它子元素的位置发生改变

（5）给父元素设置（上）边框

操作：给父元素一个边框，让子元素的margin-top以这个边框为准

缺点：多了个边框，影响美观

注意：定位能实现效果，但是，与本题关系不大。本题主要探讨的是使用margin-top实现效果的时候会产生问题，要怎么解决这个问题（现象）

总结：

  1. 高度塌陷是因为父元素没有设高，而子元素浮动脱标，造成父元素高度为0产生塌陷。

常见的解决办法：

1.给父元素设置高度

2.设置父元素的显示模式为flex

3.设置父元素overflow为hidden

  1. 外边距塌陷 分为嵌套盒子塌陷和兄弟盒子塌陷

对于嵌套盒子，常见的解决办法就是利用父盒子的padding，实现分离的效果

对于兄弟盒子，常见的解决办法就是只给一个盒子设置margin，就可以了

相关文章：

CSS之高度塌陷和外边距塌陷

目录 1.高度塌陷&#xff08;原因&#xff0c;如何解决&#xff09; 【概念介绍】 【解决办法】 【概念介绍-BFC】 【拓展-BFC的触发条件】 2.外边距塌陷 &#xff08;原因&#xff0c;如何解决&#xff09; 【概念介绍】 【两种情况】 1.相邻块元素 2.嵌套块元素 【…...

编程日记 2024/1/25 12:47:56

基于SpringBoot Vue美食网站系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…...

编程日记 2024/1/25 12:46:55

哪吒汽车与经纬恒润合作升级，中央域控+区域域控将于2024年落地

近日&#xff0c;在2024哪吒汽车价值链大会上&#xff0c;哪吒汽车与经纬恒润联合宣布合作升级&#xff0c;就中央域控制器和区域域控制器展开合作&#xff0c;合作成果将在山海平台新一代车型上发布。 哪吒汽车首席技术官戴大力、经纬恒润副总裁李伟 经纬恒润在智能驾驶领域拥…...

编程日记 2024/1/25 12:43:52

php学习-实战项目

登录注册 login_db_connect.php 连接数据库 <?php //用于登录界面数据库连接 //设置字符集 header(Content-type:text/html;charsetutf8);//连接数据库 $conmysqli_connect("localhost","root","root","lms"); if (mysqli_conne…...

编程日记 2024/1/25 12:42:51

【项目日记(四)】第一层: 线程缓存的具体实现

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:项目日记-高并发内存池⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你做项目   &#x1f51d;&#x1f51d; 开发环境: Visual Studio 2022 项目日…...

编程日记 2024/1/25 12:39:49

海思 tcpdump 移植开发详解

目录 前言 一、开发环境 二、tcpdump 源码下载 三、交叉编译 libpcap 四、交叉编译 tcpdump 五、tcpdump 移植到板子运行 前言 本章内容将讲解&#xff0c;如何在海思平台交叉编译、移植&#xff0c;并基于静态库生成的 tcpdump 网络抓包工具。 一、开发环境 SS…...

编程日记 2024/1/25 12:34:45

Javascript--流程控制

目录 数据类型转换 自动类型转换 强制类型转换 流程控制语句 顺序流程 选择流程 单分支 双分支 多分支 switch 循环流程 for循环 while循环 do...while循环 如何选择 continue和break 循环案例 数据类型转换 由于 javascrip 这个语言它是弱类型语言&#xff0c…...

编程日记 2024/1/25 12:32:43

新定义51单片机（RD8G37）实现测距测速仪

本文描述用新定义51单片机&#xff08;RD8G37&#xff09;超声波一体测距传感器实现简单的测距测速仪。 测距仪演示效果 新定义RD8G37Q48RJ开发板 超声波测距模块&#xff1a; 8位并口屏 1、main.c unsigned short timeConsuming0; unsigned int oldDistance;void rectClearS…...

编程日记 2024/1/25 12:30:41

Unity中URP下获取每一个额外灯数据

文章目录 前言一、我们先来看一下 SimpleLit 中的调用二、获取额外灯索引1、非移动平台2、非GLES平台3、大多数平台 三、获取额外灯数据 前言 在上一篇文章中&#xff0c;我们知道了URP下是怎么获取额外灯数量的。 Unity中URP下获取额外灯数量 在这篇文章中&#xff0c;我们…...

编程日记 2024/1/25 12:29:40

差分进化算法求解基于移动边缘计算 （MEC） 的无线区块链网络的联合挖矿决策和资源分配（提供MATLAB代码）

一、优化模型介绍 在所研究的区块链网络中&#xff0c;优化的变量为&#xff1a;挖矿决策&#xff08;即 m&#xff09;和资源分配&#xff08;即 p 和 f&#xff09;&#xff0c;目标函数是使所有矿工的总利润最大化。问题可以表述为&#xff1a; max ⁡ m , p , f F miner …...

编程日记 2024/1/25 12:28:40

Tomcat Notes: Web Security, HTTPS In Tomcat

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial&#xff0c;owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、Overview2、Two Levels Of Web Securi…...

编程日记 2024/1/25 12:27:39

智能小程序登陆能力开发文档及示例代码

小程序登录 涂鸦官方提供了登录能力&#xff0c;开发者可以通过相关 API 获取 App 的用户身份标识&#xff0c;快速的建立小程序内的用户体系。 登录流程 说明 需要调用 ty.login() 获取 临时登录凭证 code&#xff0c;并将 code 传到开发者服务器开发者服务器调用涂鸦云开发…...

编程日记 2024/1/25 12:22:34

常见の算法

前言本文主要使用Java 什么&#xff0c;是快乐星球#&#xffe5;%……什么是算法&#xff1f; 算法是一组完成任务的指令。任何代码片段都可视为算法&#xff0c;但我们主要介绍常见算法 一、引入——二分查找 二分查找是一种算法&#xff0c;其输入是一个有序的元素列表。如…...

编程日记 2024/1/25 12:19:31

openssl3.2/test/certs - 041 - 1024-bit leaf key

文章目录 openssl3.2/test/certs - 041 - 1024-bit leaf key概述笔记END openssl3.2/test/certs - 041 - 1024-bit leaf key 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_git_prj\study\openSSL\test_certs\041\my_openssl_linux_…...

编程日记 2024/1/25 12:18:30

「创新引领未来」科东软件荣获第十二届中国创新创业大赛（广东·广州赛区）优胜奖

近日&#xff0c;广州市科学技术局公布第十二届中国创新创业大赛&#xff08;广东广州赛区&#xff09;暨2023年广州科技创新创业大赛常规赛拟获奖企业名单。科东软件凭借国产化技术创新优势、强大的应用场景落地能力和丰富的行业解决方案&#xff0c;荣获第十二届中国创新创业…...

编程日记 2024/1/25 12:17:29

Linux下安装 Redis7

Linux下安装 Redis7 三、Linux下安装 Redis7【redis-7.2.4.tar.gz】3.1.下载redis的安装包3.1.1.手动下载Redis压缩包并上传【redis-7.2.4.tar.gz】3.1.2.wget工具下载redis-7.2.4.tar.gz 3.2.将安装包进行解压缩3.3.进入redis的安装包3.4.检查是否有gcc 环境3.5.编译和安装并指…...

编程日记 2024/1/25 12:16:27

spire.doc合并word文档

文章目录 spire.doc合并word文档1. 引入maven依赖2. 需要合并的word3. 合并文档代码4. 合并结果 spire.doc合并word文档 1. 引入maven依赖 <repositories><repository><id>com.e-iceblue</id><name>e-iceblue</name><url>https://r…...

编程日记 2024/1/25 12:13:24

蓝桥杯官网填空题（01串的熵）

问题描述 答案提交 这是一道结果填空的题, 你只需要算出结果后提交即可。本题的结果为一 个整数, 在提交答案时只填写这个整数, 填写多余的内容将无法得分。 import java.util.*;public class Main {public static void main(String[] args) {for(double zero1;zero<2333…...

编程日记 2024/1/25 12:10:19

【CodeTop】TOP 100 刷题 51-60

文章目录 51. 缺失的第一个正数题目描述代码与解题思路 52. 训练计划 II题目描述代码与解题思路 53. 子集题目描述代码与解题思路 54. 最小覆盖子串题目描述代码与解题思路 55. 从前序与中序遍历序列构造二叉树题目描述代码与解题思路 56. 零钱兑换题目描述代码与解题思路 57. …...

编程日记 2024/1/25 12:09:18

k8s的图形化工具---rancher

rancher是一个开源的企业级多集群的k8s管理平台。 rancher和k8s的区别&#xff1a;都是为了容器的调度和编排系统。但是rancher不仅可以调度还可以管理整个k8s集群。 rancher自带监控(普罗米修斯) 实验部署 master01 20.0.0.32 node01 20.0.0.34 node02 20.0.0.35 test …...

编程日记 2024/1/25 12:06:16

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/7/6 7:09:46

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/7/5 8:46:40

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/6/16 11:26:44

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/7/7 1:08:51

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/7/6 18:03:30

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/7/6 4:09:59

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2025/7/7 19:06:44

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/6/21 2:52:10

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/7/6 19:26:56