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

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

news 2025/9/16 19:07:07

目录

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

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/9/14 12:35:14

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/9/2 17:48:57

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/8/28 16:54:43

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/9/8 15:21:15

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/9/7 8:49:20

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2025/7/7 14:36:50

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2025/9/7 8:45:13

Copilot for Xcode (iOS的 AI辅助编程)

Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot&#xff0c;它能根据上下文补全代码&#xff0c;快速生成常用…...

编程新知 2025/9/11 12:36:07