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

目录

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清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465282.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拒绝事后背锅:测试项目中的风险管理一定要知道

在博主的公司中&#xff0c;测试经理除了要管理产品线的质量保障和日常部门事务工作外&#xff0c;另一项比较重要的就是测试项目全流程的管理。 今天不聊整体的测试项目流程如何开展&#xff0c;而是想聊一聊在同行中比较高频出现的一个字眼&#xff1a;风险管理。 什么是风…

基础算法——排序算法(冒泡排序,选择排序,堆排序,插入排序,希尔排序,归并排序,快速排序,计数排序,桶排序,基数排序,Java排序)

1.概述 比较排序算法 算法最好最坏平均空间稳定思想注意事项冒泡O(n)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)Y比较最好情况需要额外判断选择O( n 2 n^2 n2)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)N比较交换次数一般少于冒泡堆O( n l o g n nlogn nlogn)O( n l o g n nlogn nlogn)O( n l…

利用pythonstudio写的PDF、图片批量水印生成器,可同时为不同读者生成多组水印

现在很多场合需要将PDF或图片加水印&#xff0c;本程序利用pythonstudio编写。 第一步 界面 其中&#xff1a; LstMask:列表框 PopupMenu:PmnMark LstFiles:列表框 PopupMenu:PmnFiles OdFiles:文件选择器 Filter:PDF文件(.PDF)|.PDF|图像文件(.JPG)|.JPG|图像文件(.png…

如何区分实例化网格中的每个实例

1&#xff09;如何区分实例化网格中的每个实例 2&#xff09;项目在模拟器上切换程序后有概率画面冻结 3&#xff09;Unity工程导入团结引擎&#xff0c;GUID会变化&#xff0c;导致引用关系丢失 4&#xff09;Mask在Android平台下渲染异常 这是第407篇UWA技术知识分享的推送&a…

前端前置——ajax

目标&#xff1a;使用axios库&#xff0c;获取省份列表数据&#xff0c;展示到页面上 axios库地址&#xff1a;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 省份数据地址&#xff1a;http://hmajax.itheima.net/api/province axios的使用 axios({ url:目标资源地…

oasys系统代码审计

简述&#xff1a; oasys是一个OA办公自动化系统&#xff0c;使用Maven进行项目管理&#xff0c;基于springboot框架开发的项目&#xff0c;mysql底层数据库&#xff0c;前端采用freemarker模板引擎&#xff0c;Bootstrap作为前端UI框架&#xff0c;集成了jpa、mybatis等框架。…

书生大模型第三关Git 基础知识

关卡编号&#xff1a;L0G3000 任务一 破冰行动 fork仓库&#xff0c;注意这里不要勾选Copy branch Only!!!&#xff0c;因为后面课程中会使用到class分支&#xff1a; 克隆仓库&#xff1a; 移动分支&#xff1a; 创建自己的分支&#xff1a; 创建id.md文档&#xff0c;…

在vue3的vite网络请求报错 [vite] http proxy error:

在开发的过程中 代理proxy报错: [vite] http proxy error: /ranking/hostRank?dateType1 Error: connect ETIMEDOUT 43.xxx.xxx.xxx:443 网络请求是http的: // vite.config.ts import { Agent } from node:http;server: {host: 0.0.0.0,port: port,open: true,https: false,…

初识HTML

什么是HTML呢&#xff1f; HTML是超文本标记语言&#xff0c;HTML代码是由“标签”构成的 超文本&#xff1a;文本、声音、图片、视频、表格、链接 标记&#xff1a;由许许多多的标签组成 HTML页面是运行到浏览器上面的 第一个HTML程序 和C语言从hello world开始一样 HTML可…

DevOps-课堂笔记

各种 aaS 类比于计算机网络的 OSI 参考模型&#xff0c;一个软件应用项目需要不同的支撑层&#xff0c;例如从下至上大概需要&#xff1a; 硬件层面的服务器针对硬件做弹性分配的虚拟化机制&#xff0c;例如虚拟机在虚拟化环境内运行的 OS支撑软件应用的中间件&#xff0c;例…

AnatoMask的分层图像编码器-解码器

方法思想 采用多尺度编码器-解码器主干&#xff1a; 在编码器中&#xff0c;把CT图像分解成不同大小的图像块&#xff0c;从这些图像块中提取特征在解码器中&#xff0c;重建被掩盖图像时&#xff0c;考虑图像块的空间关系 输入D&#xff08;深度Depth&#xff09;张H&#x…

C++ 之boost/date_time/posix_time高精度计时详细总结

文章目录 概要时间长度类time_duration时间点ptime时间区域time_period时间迭代器实际应用1&#xff1a;&#xff08;计算加速度&#xff09;实际应用2&#xff1a;可以支持秒级和微秒/纳秒级计时器 概要 使用date_time库需要在编译时加上"-lboost_date_time"&#x…

小语言模型介绍与LLM的比较

小模型介绍 小语言模型&#xff08;SLM&#xff09;与大语言模型&#xff08;LLM&#xff09;相比&#xff0c;具有不同的特点和应用场景。大语言模型通常拥有大量的参数&#xff08;如 GPT-3 拥有 1750 亿个参数&#xff09;&#xff0c;能够处理复杂的自然语言任务&#xff…

Kafka 可观测性最佳实践

Kafka 概述 Kafka 是由 LinkedIn 开发一个分布式的基于发布订阅模式的消息队列&#xff0c;是一个实时数据处理系统&#xff0c;可以横向扩展。与 RabbitMQ、RockerMQ 等中间件一样拥有几大特点&#xff1a; 异步处理服务解耦流量削峰 监控 Kafka 是非常重要的&#xff0c;因…

混合式学习平台:企业培训的新选择

在当前的商业环境中&#xff0c;企业普遍采用在线直播课程进行员工培训。然而&#xff0c;在线学习常常伴随着焦虑、疲劳和效率低下等问题&#xff0c;这些都是企业在进行在线培训时需要面对和解决的挑战。本文将探讨如何通过使用白板协作工具——即时白板&#xff0c;来提高企…

内网项目,maven本地仓库离线打包,解决Cannot access central in offline mode?

背景&#xff1a; 内网项目打包&#xff0c;解决Cannot access central in offline mode? 1、修改maven配置文件&#xff1a; localRepository改为本地仓库位置 <localRepository>D:\WorkSpace\WorkSoft\maven-repository\iwhalecloud-repository\business</loca…

如何用 ChatPaper.ai 打造完美的 AI 课堂笔记系统

作为学生&#xff0c;我们都遇到过这样的困扰&#xff1a;上课时记笔记太投入就听不进讲解&#xff0c;专注听讲又担心错过重要知识点。有了AI助手&#xff0c;这个问题就可以优雅地解决了。今天跟大家分享如何用ChatPaper.ai构建个人的智能课堂笔记系统。 为什么需要AI辅助记笔…

雷池社区版 7.1.0 LTS 发布了

LTS&#xff08;Long Term Support&#xff0c;长期支持版本&#xff09;是软件开发中的一个概念&#xff0c;表示该版本将获得较长时间的支持和更新&#xff0c;通常包含稳定性、性能改进和安全修复&#xff0c;但不包含频繁的新特性更新。 作为最受欢迎的社区waf&#xff0c…

C语言心型代码解析

方法一 心型极坐标方程 爱心代码你真的理解吗 笛卡尔的心型公式&#xff1a; for (y 1.5; y > -1.5; y - 0.1) for (x -1.5; x < 1.5; x 0.05) 代码里面用了二个for循环&#xff0c;第一个代表y轴&#xff0c;第二个代表x轴 二个增加的单位不同&#xff0c;能使得…

【云原生开发】如何通过client-go来操作K8S集群

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…