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

CSS基础知识六（浮动的高度塌陷问题及解决方案）

news 2026/5/23 9:06:30

目录

1.浮动高度塌陷概念

2.下面是几种解决高度塌陷的几种方案：

解决方案一：

解决方案二： 

解决方案三： 

1.浮动高度塌陷概念

在CSS中，高度塌陷问题指的是父元素没有正确地根据其内部的浮动元素或绝对定位元素来计算自身的高度，导致父元素的高度变为0。

2.下面是几种解决高度塌陷的几种方案：

解决方案一：

添加一个没有实际显示效果的盒子

这个盒子主要用来撑开父盒，避免高度塌陷影响其他布局，其实h5给我们提供了伪元素 我们可以利用伪元素代替下面这个盒子。

例如以下效果图中的盒子5：

参考代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>article{width: 1500px;/* 如果复合由于各种原因没有设置高度，子盒的浮动会导致父盒的高度塌陷为0。父盒高度塌陷后会影响父盒的兄弟盒子（同级元素如<article>和<footer>）的布局*//* 解决方法1（忘记）：把高度加回来就可以了 *//* 解决方法2（没有办法设置高度）： *//* height: 900px; */background-color: rgb(128, 128, 128);}#div1{width: 200px;height: 100px;background-color: rgb(255, 0, 0);margin-bottom: 5px;float:left;
}#div2{width: 200px;height: 100px;background-color: rgb(54, 252, 70);margin-bottom: 5px;float:left;}#div3{width: 200px;height: 100px;background-color: rgb(81, 0, 255);margin-bottom: 5px;float:right;}#div4{width: 200px;height: 100px;background-color: rgb(136, 0, 255);margin-bottom: 5px;float:right;}footer{width: 1500px;height: 100px;background-color: rgb(136, 0, 255);}</style>
</head><body><article><div id="div1">盒子1</div><div id="div2">盒子2</div><div id="div3">盒子3</div><div id="div4">盒子4</div><div style="clear:both; ">盒子5</div><!-- 作用:忽略前面盒子移动对它的影响,所以盒子1的原本位置还会在 --><!-- 盒子5没有实际显示效果，主要用来撑开父盒，避免高度塌陷影响其他布局其实h5给我们提供了伪元素 我们可以利用伪元素代替下面这个盒子。--><!-- both清除前面左右浮动对我的影响 -->
</article></body>
</html><!-- 1-5在同一个浮层上 12345 -->
<!-- 当位置不够的时候，会换行 --><!-- 不好的影响， --><!-- 可以做导航栏 -->
解决方案二： 

 通过给父元素设置浮动属性，可以让父元素自动包含其内部的浮动元素。

例如：

. article {float: left;
}
解决方案三： 

利用clear属性

        clear可以用来清除其他浮动元素对当前元素的影响

   none默认值，不清除浮动
  left清除左侧浮动元素对当前元素的影响
right清除右侧浮动元素对当前元素的影响
both清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动

相关文章：

CSS基础知识六（浮动的高度塌陷问题及解决方案）

目录 1.浮动高度塌陷概念 2.下面是几种解决高度塌陷的几种方案&#xff1a; 解决方案一&#xff1a; 解决方案二&#xff1a; 解决方案三&#xff1a; 1.浮动高度塌陷概念 在CSS中&#xff0c;高度塌陷问题指的是父元素没有正确地根据其内部的浮动元素或绝对定位元素来计…...

编程日记 2024/11/6 19:11:04

开源模型应用落地-glm模型小试-glm-4-9b-chat-vLLM集成（四）

一、前言 GLM-4是智谱AI团队于2024年1月16日发布的基座大模型&#xff0c;旨在自动理解和规划用户的复杂指令&#xff0c;并能调用网页浏览器。其功能包括数据分析、图表创建、PPT生成等&#xff0c;支持128K的上下文窗口&#xff0c;使其在长文本处理和精度召回方面表现优异&a…...

编程日记 2024/11/6 19:10:04

.net为什么要在单独的项目中定义扩展方法？C#

使用 扩展方法&#xff08;Extension Methods&#xff09; 和创建 扩展类&#xff08;Extension Class&#xff09; 在 C# 中有几个特定的目的&#xff0c;主要是为了提高代码的可扩展性、灵活性和可读性。让我们来详细解释这些概念以及为什么扩展类需要是静态的。 为什么使用…...

编程日记 2024/11/6 19:09:02

动态规划 —— dp 问题-打家劫舍II

1.打家劫舍II 题目链接&#xff1a; 213. 打家劫舍 II - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/house-robber-ii/ 2. 题目解析 通过分类讨论&#xff0c;将环形问题转换为两个线性的“打家劫舍|” 当偷第一个位置的时候&#xff0c;rob1在&#…...

编程日记 2024/11/6 19:08:01

Java基础-组件及事件处理（上）

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 Swing 概述 MVC 架构 Swing 特点 控件 SWING UI 元素 JFrame SWING 容器 说明 常用方法 示例&a…...

编程日记 2024/11/6 19:06:00

Python实例：爱心代码

前言 在编程的奇妙世界里，代码不仅仅是冰冷的指令集合，它还可以成为表达情感、传递温暖的独特方式。今天，我们将一同探索用 Python 语言绘制爱心的神奇之旅。 爱心，这个象征着爱与温暖的符号，一直以来都在人类的情感世界中占据着特殊的地位。而通过 Python 的强大功能，…...

编程日记 2024/11/6 19:02:57

图解大模型训练系列：序列并行3，Ring Attention

在序列并行系列中&#xff0c;我们将详细介绍下面四种常用的框架/方法&#xff1a; Megatron Sequence Parallelism&#xff1a;本质是想通过降低单卡激活值大小的方式&#xff0c;尽可能多保存激活值&#xff0c;少做重计算&#xff0c;以此提升整体训练速度&#xff0c;一般…...

编程日记 2024/11/6 18:59:54

pyspark基础准备

1.前言介绍 学习目标&#xff1a;了解什么是Speak、PySpark&#xff0c;了解为什么学习PySpark&#xff0c;了解课程是如何和大数据开发方向进行衔接 使用pyspark库所写出来的代码&#xff0c;既可以在电脑上简单运行&#xff0c;进行数据分析处理&#xff0c;又可以把代码无缝…...

编程日记 2024/11/6 18:58:53

Netty报错

问题&#xff1a;因客户反馈Netty版本低&#xff0c;影响性能&#xff0c;建议提升。于是&#xff0c;我将所有Netty版本从4.1.82.Final到4.1.114.Final后&#xff0c;报下面的错误&#xff0c;java.lang.NoClassDefFoundError: io/netty/util/Recycler$EnhancedHandle&#xf…...

编程日记 2024/11/6 18:57:52

Kafka 之顺序消息

前言&#xff1a; 在分布式消息系统中&#xff0c;消息的顺序性是一个重要的问题&#xff0c;也是一个常见的业务场景&#xff0c;那 Kafka 作为一个高性能的分布式消息中间件&#xff0c;又是如何实现顺序消息的呢&#xff1f;本篇我们将对 Kafka 的顺序消息展开讨论。 Kafk…...

编程日记 2024/11/6 18:56:51

Kafka 之批量消息发送消费

前言&#xff1a; 前面我们分享了 Kafka 的一些基础知识&#xff0c;以及 Spring Boot 集成 Kafka 完成消息发送消费&#xff0c;本篇我们来分享一下 Kafka 的批量消息发送消费。 Kafka 系列文章传送门 Kafka 简介及核心概念讲解 Spring Boot 整合 Kafka 详解 Kafka Kafka…...

编程日记 2024/11/6 18:54:49

【大数据学习 | kafka】kafka的偏移量管理

1. 偏移量的概念 消费者在消费数据的时候需要将消费的记录存储到一个位置&#xff0c;防止因为消费者程序宕机而引起断点消费数据丢失问题&#xff0c;下一次可以按照相应的位置从kafka中找寻数据&#xff0c;这个消费位置记录称之为偏移量offset。 kafka0.9以前版本将偏移量信…...

编程日记 2024/11/6 18:53:47

实景三维赋能森林防灭火指挥调度智慧化

森林防灭火工作是保护森林资源和生态环境的重要任务。随着信息技术的发展&#xff0c;实景三维技术在森林防灭火指挥调度中的应用日益广泛&#xff0c;为提升防灭火工作的效率和效果提供了有力支持。 一、森林防灭火面临的挑战 森林火灾具有突发性强、破坏性大、蔓延速度快、…...

编程日记 2024/11/6 18:51:45

【C++课程学习】：string的模拟实现

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;C课程学习 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 一.string的主体框架&#xff1a; 二.string的分析&#xff1a; &#x1f354;构造函数和析构函数&a…...

编程日记 2024/11/6 18:50:44

Linux（VMware + CentOS ）设置固定ip

需求&#xff1a;设置ip为 192.168.88.130 先关闭虚拟机 启动虚拟机 查看当前自动获取的ip 使用 FinalShell 通过 ssh 服务远程登录系统&#xff0c;更换到 root 用户 修改ip配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 重启网卡 systemctl restart network …...

编程日记 2024/11/6 18:49:43

安卓 android studio各版本下载地址（官方）

https://developer.android.google.cn/studio/archive 别用中文&#xff0c;右上角的语言切换成英文...

编程日记 2024/11/6 18:48:42

如何在一个 Docker 容器中运行多个进程 ?

在容器化的世界里&#xff0c;Docker 彻底改变了开发人员构建、发布和运行应用程序的方式。Docker 容器封装了运行应用程序所需的所有依赖项&#xff0c;使其易于跨不同环境一致地部署。然而&#xff0c;在单个 Docker 容器中管理多个进程可能具有挑战性&#xff0c;这就是 Sup…...

编程日记 2024/11/6 18:46:40

poetry 配置多个cuda环境心得

操作系统&#xff1a;ubuntu22.04 LTS python版本&#xff1a;3.12.7 最近学习了用poetry配置python虚拟环境&#xff0c;当为不同的项目配置cuda时&#xff0c;会遇到不同的项目使用的cuda版本不一致的情况。 像torch 这样的库&#xff0c;它们会对cuda-toolkit有依赖&…...

编程日记 2024/11/6 18:40:34

网络编程入门

目录 1.网络编程入门 1.1 网络编程概述【理解】 1.2 网络编程三要素【理解】 1.3 IP地址【理解】 1.4InetAddress【应用】 1.5端口和协议【理解】 2.UDP通信程序 2.1 UDP发送数据【应用】 2.2UDP接收数据【应用】 2.3UDP通信程序练习【应用】 3.TCP通信程序 3.1TCP…...

编程日记 2024/11/6 18:39:32

Linux-socket详解

Linux-socket详解_socket linux-CSDN博客...

编程日记 2024/11/6 18:36:29

OpenAI通用推理模型攻克近80年数学难题，打脸7个月前虚假突破质疑

【导语&#xff1a;5月21日&#xff0c;OpenAI宣布其一款未对外发布的内部通用推理模型独立完成原创数学证明&#xff0c;推翻了匈牙利数学家保罗埃尔德什1946年提出的“平面单位距离猜想”&#xff0c;这是AI首次独立攻克数学领域核心著名公开难题。】AI攻克近80年几何猜想Ope…...

编程新知 2026/5/23 8:14:07

告别CubeMX思维定式：用S32DS的Processor Expert玩转S32K144外设配置（含FreeRTOS组件添加）

从CubeMX到Processor Expert&#xff1a;S32K144高效开发实战指南 在嵌入式开发领域&#xff0c;工具链的选择往往决定了开发效率的上限。对于习惯了ST生态的开发者来说&#xff0c;CubeMX的图形化配置已成为肌肉记忆般的操作。但当项目需求将我们推向NXP的S32K系列时&#xff…...

编程新知 2026/5/23 7:53:12

【MLOps】模型部署与监控实战：从训练到生产的完整链路

一、MLOps概述与重要性 在机器学习项目中&#xff0c;模型训练仅仅是第一步。将训练好的模型部署到生产环境并持续监控其性能&#xff0c;是确保业务价值实现的关键环节。MLOps&#xff08;Machine Learning Operations&#xff09;正是解决这一问题的方法论和实践体系。 1.1 什…...

编程新知 2026/5/23 7:39:53

Serverless多事件触发器：提升FaaS效率的关键技术

1. Serverless计算中的多事件触发器&#xff1a;突破传统FaaS的局限在当今云原生架构中&#xff0c;Serverless计算已成为构建弹性应用的重要范式。作为其核心组件的函数即服务(FaaS)平台&#xff0c;如AWS Lambda和Google Cloud Functions&#xff0c;通过事件驱动机制实现了资…...

编程新知 2026/5/23 6:59:08

机器学习---监督学习入门实验全攻略（小白友好版）

新晋码农一枚&#xff0c;小编会定期整理一些写的比较好的代码和知识点&#xff0c;作为自己的学习笔记&#xff0c;试着做一下批注和补充&#xff0c;转载或者参考他人文献会标明出处&#xff0c;非商用&#xff0c;如有侵权会删改&#xff01;欢迎大家斧正和讨论&#xff01;…...

编程新知 2026/5/23 6:48:52

牛客周赛 Round 142 C题及D题题解

首先是C题&#xff1a; 咱们先看题目&#xff1a; 链接&#xff1a;https://ac.nowcoder.com/acm/contest/133790/C 来源&#xff1a;牛客网。 这道题其实特别简单&#xff0c;我们只需要按顺序遍历数组&#xff0c;统计能依次被 1、2、3... 整除的元素数量&#xff0c;即…...

编程新知 2026/5/23 6:32:44

平衡小车PID调参新思路：用合宙ESP32-C3的BLE功能实现无线数据收发（附完整Arduino代码）

平衡小车无线PID调参实战&#xff1a;基于ESP32-C3 BLE的实时数据交互方案 调试平衡小车时&#xff0c;最令人头疼的莫过于反复插拔USB线修改PID参数。我曾经历过这样的场景&#xff1a;小车在桌面上左右摇摆&#xff0c;我蹲在地上盯着串口数据&#xff0c;每次修改参数都要暂…...

编程新知 2026/5/23 5:41:56

计算机视觉毕设避坑指南：从开题到答辩，我踩过的雷和总结的实用工具包（含数据集/模型/部署）

计算机视觉毕设避坑指南&#xff1a;从开题到答辩的实战经验与工具包 第一次接触计算机视觉毕业设计时&#xff0c;我被那些炫酷的论文标题和复杂的模型结构吓得不轻。直到自己真正走完全程&#xff0c;才发现毕设更像是一场马拉松&#xff0c;而不是百米冲刺——重要的不是起步…...

编程新知 2026/5/23 5:16:36

Shader Graph边缘光原理与实战：从菲涅尔效应到世界空间法线

1. 为什么边缘光不是“加个描边”那么简单——从美术需求到Shader本质的错位“给模型加个边缘光”&#xff0c;听起来像Unity编辑器里拖个组件、点几下鼠标就能搞定的事。我第一次接到这个需求时&#xff0c;美术同学在评审会上甩出一张《原神》角色截图&#xff0c;指着雷电将…...

编程新知 2026/5/23 4:33:28

2026 国内 ChatGPT 镜像站推荐

&#x1f4d6; 国内直接访问&#xff0c;支持 GPTs、绘图、文件分析&#xff0c;对话数据隔离 ✅ 写方案/周报&#xff0c;描述需求直接生成&#xff0c;5分钟搞定 ✅ 代码报错&#xff0c;粘贴进去秒出解决方案 ✅ 读文件/PDF&#xff0c;上传即可提问&#xff0c;不用逐字看…...

编程新知 2026/5/23 4:22:37