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

devtools/2024/11/7 19:21:18/
htmledit_views">

目录

1.浮动高度塌陷概念

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

解决方案一:

解决方案二: 

解决方案三: 


1.浮动高度塌陷概念

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

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

解决方案一:

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

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

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

参考代码:

html"><!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 -->
<!-- 当位置不够的时候,会换行 --><!-- 不好的影响, --><!-- 可以做导航栏 -->
解决方案二: 

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

例如:

html">. article {float: left;
}
解决方案三: 

利用clear属性

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

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


http://www.ppmy.cn/devtools/132096.html

相关文章

赛元MCU 脱机烧录步骤

烧录设置 生成烧录配置文件 载入配置文件 下载程序到烧录器中 并 对比 脱机烧录 1、 将SC-LINK 使用外部5V电源供电 2、将烧录口对准主板烧录接口 3、busy亮红灯&#xff0c;进入烧录ing&#xff0c;烧录成功后&#xff0c;OK灯亮蓝灯 注意事项 其中工程校验和 可以作为程序…

MATLAB-数学建模-无约束规划求解方法(非线性规划)

MATLAB-数学建模-无约束规划求解方法&#xff08;非线性规划&#xff09; fminbnd函数 其功能是求取固定区间内单变量函数的最小值&#xff0c;也就是一元函数的最小值问题。其数学模型为 minf(x),x1<x<x1 式中&#xff0c;x,x1,x2 均为标量&#xff1a;f(x)为目标函…

【手势识别】Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+机器学习+Django网页界面+算法模型

一、介绍 手势识别系统&#xff0c;使用Python作为主要编程语言&#xff0c;通过收集了10种手势图片数据集&#xff08;0~9&#xff09;&#xff0c;然后基于TensorFlow搭建卷积神经网络算法模型&#xff0c;然后训练模型得到一个识别精度较高的模型文件&#xff0c;在基于Dja…

认识物联网

新一代信息技术 物联网 物物相连的互联网&#xff0c;即物联网&#xff0c;又称传感器常见的传感器 • 温度传感器 • 压力传感器 • 声音传感器 • 02 • */08521 物联网概念 • 通过射频识别&#xff0c;红外传感器&#xff0c;全球定位系统GPS&#xff0c;激光扫描…

大模型LLama3!!!Ollama下载、部署和应用(保姆级详细教程)

首先呢&#xff0c;大家在网站先下载ollama软件 这就和anaconda和python是一样的 废话不多说 直接上链接&#xff1a;Download Ollama on Windows 三个系统都支持 注意&#xff1a; 这里的Models&#xff0c;就是在上面&#xff0c;大家点开之后&#xff0c;里面有很多模型…

Gin入门笔记

1.基本数据类型 整型 类型占用存储空间int32位系统4字节64位系统8字节unint32位系统4字节64位系统8字节int81字节int162字节int324字节int648字节uint81字节uint162字节uint324字节uint648字节rune4字节(等价int32)byte1字节(等价unint8) Unicode字符rune类型是和int32等价的…

ssm060基于SSM的高校共享单车管理系统的设计与实现+vue(论文+源码)_kaic

设计题目&#xff1a;高校共享单车管理系统的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0…

在线预览 Word 文档

引言 随着互联网技术的发展&#xff0c;Web 应用越来越复杂&#xff0c;用户对在线办公的需求也日益增加。在许多业务场景中&#xff0c;能够直接在浏览器中预览 Word 文档是一个非常实用的功能。这不仅可以提高用户体验&#xff0c;还能减少用户操作步骤&#xff0c;提升效率…