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.mzph.cn/web/58343.shtml

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

相关文章

计算机网络:网络层 —— 边界网关协议 BGP

文章目录 路由选择协议动态路由协议边界网关协议 BGPBGP 的基本概念BGP-4 的四种报文 路由选择协议 因特网是全球最大的互联网&#xff0c;它所采取的路由选择协议具有以下三个主要特点&#xff1a; 自适应&#xff1a;因特网采用动态路由选择&#xff0c;能较好地适应网络状态…

风力发电并网系统的相关控制策略

风电作为一种可再生资源&#xff0c;具有低污染、储量大等优点。随着近年来**绿色发展战略的深入实施&#xff0c;我国风力发电技术取得重大进展。风力发电总装机容量机并网规模呈逐年增长趋势&#xff0c;为**工农业生产及居民生活提供了大量电力能源。然而&#xff0c;风力发…

uni-app跨域set-cookie

set-cookie的值是作为一个权限控制的 首先&#xff0c;无论什么接口都会返回一个set-cookie&#xff0c;但未登录时&#xff0c;set-cookie是没有任何权限的 其次&#xff0c;登录接口请求时会修改set-cookie&#xff0c;并且在后续其他接口发起请求时&#xff0c;会在请求头…

【RabbitMQ】03-交换机

1. 交换机 2. Fanout交换机 广播。生产者向exchange发消息 SpringBootTest public class SpringAmqpTest {Autowiredpublic RabbitTemplate rabbitTemplate;Testvoid testSimple() {String exchangName "hmall.fabout";rabbitTemplate.convertAndSend(exchangName…

基于python构造电影neo4j知识图谱

使用pandas构造neo4j电影知识谱图 实现效果 电影知识图谱构造过程 实现过程 import pandas as pd from tqdm import tqdmfrom config import graph, cnndef delete_all():graph.run("MATCH(n) DETACH DELETE(n)")# 创建带属性的节点 def createNode(node, row):try…

曲速磨-干法研磨机、超细研磨机、节能细磨

曲速磨在涂料粉体中的应用广泛&#xff0c;主要体现在提高涂料粉体的品质、生产效率以及适应特殊工艺需求等方面。 1.提高涂料粉体品质 细化颗粒&#xff1a;曲速磨通过研磨媒体(如锆珠)的高速运动&#xff0c;对涂料粉体进行强烈的碰撞、摩擦和剪切作用&#xff0c;从而有效地…

加锁失效,非锁之过,加之错也|京东零售供应链库存研发实践

本文导读 从事京东零售供应链库存业务&#xff0c;库存数量操作增减十分频繁&#xff0c;并且项目开发中会常常遇到各种并发情况&#xff0c;一旦库存数量操作有误&#xff0c;势必给前台销售产生损失影响&#xff0c;因此需要关注对库存数量并发操作下的一致性问题。 大部分…

FileLink如何帮助医疗行业实现安全且高效的跨网文件交换

在当今数字化时代&#xff0c;医疗行业在快速发展的同时&#xff0c;也面临着数据安全和信息流转效率的双重挑战。患者的健康记录、影像数据、检查报告等大量敏感信息需要在不同医院、诊所、实验室和保险公司之间高效、迅速地传递。然而&#xff0c;传统的邮件、传真和纸质文件…

Nginx:我自己的网站

一、Nginx的简介 Nginx是一款轻量的级的HTTP服务器&#xff0c;也是一款邮箱代理服务器&#xff0c;同时具备反向代理&#xff0c;通用TCP/UDP代理功能。 Nginx可以运行在x86、ARM等多种平台上&#xff0c;同时支持Linux、windows等主流的操作系统 二、Nginx的特点 1、支持高并…

qt QDropEvent详解

1、概述 QDropEvent是Qt框架中用于处理拖放释放事件的一个类。它允许开发者在用户界面中更好地管理和处理拖放操作&#xff0c;从而实现交互式和响应式的应用程序。QDropEvent类提供了处理拖放释放事件所需的方法和信号&#xff0c;使得开发者能够轻松地实现拖放功能&#xff…

数据中台一键大解析!

自从互联玩企业掀起了数据中台风&#xff0c;数据中台这个点马上就火起来了&#xff0c;短短几年数据中台就得到了极高的热度&#xff0c;一大堆企业也在跟风做数据中台&#xff0c;都把数据中台作为企业数字化转型的救命稻草&#xff0c;可是如果我告诉你数据中台并不是万能钥…

C++设计模式结构型模式———组合模式

文章目录 一、引言二、组合模式三、总结 一、引言 组合模式是一种结构型设计模式&#xff0c; 可以使用它将对象组合成树状结构&#xff0c; 并且能像使用独立对象一样使用它们。代码实现中涉及了递归调用。组合模式与传统上的“类与类之间的组合关系”没有关联&#xff0c;不…

Maven项目的基础配置:利用IDEA将SpringBoot的项目打包成war文件

文章目录 引言Maven项目的聚合与继承(依赖管理)把项目打包成war包其他打包配置引言 利用IDEA将SpringBoot的项目打包成war文件Maven项目的聚合与继承(依赖管理)Maven项目的聚合与继承(依赖管理) 把项目打包成war包 利用IDEA将SpringBoot的项目打包成war文件:要配置启动…

基于vue框架的的奶茶店预约订单系统3fb55(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,奶茶分类,奶茶信息 开题报告内容 开题报告 题目&#xff1a;基于Vue框架的奶茶店预约订单系统开发 一、研究背景与意义 背景 随着饮品市场的蓬勃发展&#xff0c;奶茶店作为其中的重要组成部分&#xff0c;其业务量和顾客需求持…

Interpreter 解释器模式

1 意图 给定一个语言&#xff0c;定义它的文法的一种表示&#xff0c;并定义一个解释器&#xff0c;这个解释器使用该表示》解释语言中的句子。 2 结构 AbstactExpression 声明一个程序的解释操作&#xff0c;这个接口为抽象语法树中所有的结点所共享。TemminalExpression 实…

【数据结构】哈希思想详解

目录 前言1. unordered系列关联式容器1.1 unordered_map1.1.1 unordered_map介绍1.1.2 接口说明 1.2 unordered_set 2. 哈希概念3. 哈希冲突4. 哈希函数5. 哈希冲突解决5.1 闭散列5.1.1 闭散列的概念5.1.2 闭散列代码实现 5.2 开散列5.2.1 开散列概念5.2.2 开散列代码实现5.2.3…

变异凯撒(Crypto)

目录 解题思路 题目设计原理 总结 解题思路 从题目可以看出&#xff0c;这是凯撒密码&#xff0c;原理应该还是整体偏移&#xff0c;但是变异了。 凯撒密码只有字母的横移&#xff0c;而通过观察我们可知&#xff0c;加密密文包含大小写字母、特殊字符&#xff0c;于是猜想大…

光伏无人机踏勘,照亮光伏未来!

光伏电站选址地分散在各地&#xff0c;想要精准获取该地的地形特点与屋顶面积等信息&#xff0c;传统的人工踏勘耗时耗力且精度无法保证&#xff0c;难以满足现代光伏项目的规模快发发展需求。光伏无人机踏勘&#xff0c;照亮光伏未来&#xff01; 在光伏无人机智能踏勘设计系统…

Nvidia突袭AI江湖!悄悄发布新模型,完爆OpenAI和Anthropic?

你以为Nvidia只会造芯片&#xff1f;太天真了&#xff01;这家GPU巨头刚刚在AI语言模型领域上演了一出惊天逆袭&#xff0c;让OpenAI和Anthropic都措手不及。 没有轰轰烈烈的发布会&#xff0c;没有铺天盖地的宣传&#xff0c;Nvidia就这么静悄悄地在Hugging Face平台上扔出了一…

一. nginx学习笔记 又长又臭篇幅

目录 引言 Nginx 简介 Nginx 的特点和优势 适用场景 安装 Nginx 在 Windows 上安装 Nginx 在 Linux &#xff08;CentOS&#xff09;上安装 Nginx 基本配置 Nginx 配置文件结构 启动、停止和重载 Nginx 基本的服务器块配置 处理静态文件 设置文档根目录 配置 MIM…