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

HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）

news 2025/11/9 3:24:08

浮动的相关属性

以下使浮动的常用属性值：

float：	设置浮动
以下属性：
left : 设置左浮动
right : 设置右浮动
none ：不浮动，默认值

clear	清除浮动 清除前面兄弟元素浮动元素的响应	
以下属性：
left ：清除前面左浮动的影响
right ：清除前面右浮动的影响
both ：清除前面左右浮动的影响

元素浮动之后的特点

在上面我们知道了对于浮动的元素，其会脱离标准文档流。
浮动产生的影响：

脱离文档流。
不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
不会独占一行，可以与其他元素共用一行。
不会margin 合并，也不会margin 塌陷，能够完美的设置四个方向的margin 和padding 。
不会像行内块一样被当做文本处理（没有行内块的空白问题）。

6.当元素浮动之后，下面的元素就可以向上提升位置，占有浮动元素的位置。

解决浮动产生的影响

浮动产生的一些困扰：

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

其实最主要要解决的影响是（父元素高度塌陷），以下是解决方案：

方案一：给父元素指定高度。
方案二：给父元素设置浮动，带来其他影响。
方案三：给父元素设置 overflow:hidden 。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both

额外标签：谁需要清除浮动就在该元素后面添加一个空白标签，属性设置为：clear:both

方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动（推荐使用）
伪元素对于其父元素，我们可以给其加上一个类，并对该类进行如下设置：

.clearfix::after {/* 设置添加子元素的内容是空 */content: '';/* 设置添加子元素为块级元素 */display: block;/* 设置添加的子元素的高度0 */height: 0;/* 设置添加子元素看不见 */visibility: hidden;/* 设置clear：both */clear: both;
}

作业

盒子模型

<!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>*{margin: 0px auto;padding:0px;/* 自动减去边距宽度 */box-sizing: border-box;}/* 整体 */#all{width: 970px;height: 586px;/* 整体背景颜色，看效果 *//* background-color: palegoldenrod; */}/* 顶部 */#top{width: 970px;height: 103px;/* 在最开始设置整体布局可以写一下 *//* background-color: pink; */}/* 红色的盒子 */.left1{float: left;width: 277px;height: 103px;background-color: red;}/* 右边 */.right1{float: right;width: 679px;height: 103px;}/* 语言选择 */.chinese{float: right;width: 137px;height: 49px;background-color: green;margin-bottom: 8px;}/* 导航条 */.banner{overflow: hidden;width: 679px;height: 46px;background-color: green;}/* 中部 */#middle{width: 970px;height: 435px;/* background-color:pink ; */margin-top:8px ;}/* 黄色部分 大广告 */.left2{float: left;width: 310px;height: 435px;background-color: yellow;margin-right: 10px;}/* 中部的中部部分 蓝色部分 */.center{float: left;width: 450px;height: 435px;}.one{width: 450px;height: 240px;background-color: skyblue;}.two{width: 450px;height: 110px;background-color: skyblue;margin-top: 10px;}.three{width: 450px;height: 30px;background-color: skyblue;margin-top: 10px;}.right2{overflow: hidden;width: 190px;height: 400px;background-color: purple;}/* 深蓝色 */.blue{float: left;width: 648px;height: 25px;background-color: blue;margin-top: 10px;}/* 底部 */#bottom{width: 970px;height: 40px;background-color: darkorange;margin-top: 10px;}</style>
</head>
<body><!-- 整体盒子模型 --><div id="all"><!-- 顶部 --><div id="top"><!-- 红色的盒子 --><div class="left1"></div><!-- 右部分 --><div class="right1"><div class="chinese"></div><div class="banner"></div></div></div><!-- 中部 --><div id="middle"><!-- 黄色部分 --><div class="left2"></div><!-- 浅蓝色部分 --><div class="center"><div class="one"></div><div class="two"></div><div class="three"></div><!-- 深蓝色 --><div class="blue"></div></div><!-- 紫色 --><div class="right2"></div></div><!-- 底部 --><div id="bottom"></div></div>
</body>
</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>*{margin: 0px;padding:0px;}#all{width: 500px;height: 400px;}.top{width: 480px;/* height: 100px; */margin: 10px;margin-bottom: 0px;border-top: 1px dashed;} .bgc{width: 480px;height: 20px;background-color: rgb(227, 235, 241);}p{display: inline-block;border-left:3px solid blue ;padding-left: 16px;margin-left: 5px;font-size: 24px;/* margin-top: 20px; */color: blue;font-weight:bolder;}.top a{float: right;margin-top: 10px;color:blue ;}a{text-decoration: none;}.one{width: 480px;height: 2px;background-image: linear-gradient(to right , rgb(61, 47, 187),red);margin-top: 5px;}.bottom{width: 500px;}.bottom li{border-bottom: 1px dashed rgb(210, 207, 207);background: url(..//imgs/triangle1.png) no-repeat 4px;background-size: 12px 12px;padding: 5px;padding-left: 24px;margin: 10px;}span{float: right;}</style>
</head>
<body><!-- 整体 --><div id="all"><!-- 通知公告 --><div class="top"><div class="bgc"></div><p>通知公告</p> <a href="#">更多》</a><div class="one"></div></div><!-- 内容 --><div class="bottom"><ul><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li><li><a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a><span>2014年9月28号</span></li></ul></div></div>
</body>
</html>

HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）

浮动的相关属性以下使浮动的常用属性值： float： 设置浮动以下属性： left : 设置左浮动 right : 设置右浮动 none ：不浮动，默认值clear 清除浮动清除前面兄弟元素浮动元素的响应以下属性： left &…...

编程日记 2024/11/10 8:55:46

【C++ 滑动窗口】2134. 最少交换次数来组合所有的 1 II

本文涉及的基础知识点 C算法：滑动窗口及双指针总结 LeetCode2134. 最少交换次数来组合所有的 1 II 交换定义为选中一个数组中的两个互不相同的位置并交换二者的值。环形数组是一个数组，可以认为第一个元素和最后一个元素相邻。给你一个二…...

编程日记 2024/11/10 8:52:44

使用 PyTorch 实现并测试 AlexNet 模型，并使用 TensorRT 进行推理加速

本篇文章详细介绍了如何使用 PyTorch 实现经典卷积神经网络 AlexNet，并利用 Fashion-MNIST 数据集进行训练与测试。在训练完成后，通过 TensorRT 进行推理加速，以提升模型的推理效率。本文全部代码链接：全部代码下载环境配置为了保证代码在 GPU 环境下顺利运行，我们将…...

编程日记 2024/11/10 8:49:41

Python 数据可视化详解教程

Python 数据可视化详解教程数据可视化是数据分析中不可或缺的一部分，它通过图形化的方式展示数据，帮助我们更直观地理解和分析数据。Python 作为一种强大的编程语言，拥有丰富的数据可视化库，如 Matplotlib、Seaborn、Plotly 和 …...

编程日记 2024/11/10 8:47:38

springboot集成opencv开源计算机视觉库

最近项目需要用到opencv，网上看到很多资料都是下载安装并且引入jar包与dll文件，感觉很麻烦，不是我想要的，于是花时间折腾了下，不需要任何安装与引入jar包与dll文件，简单方便，快速上手。先说说…...

编程日记 2024/11/10 8:44:35

CCF ChinaOSC |「开源科学计算与系统建模openSCS专题分论坛」11月9日与您相约深圳

2024年11月9日至10日，以“湾区聚力开源启智”为主题的2024年中国计算机学会中国开源大会（CCF ChinaOSC）将在深圳召开。大会将汇聚国内外学术界、顶尖科技企业、科研机构及开源社区的精英力量，共同探索人工智能技术和人类智慧的无…...

编程日记 2024/11/10 8:42:34

2024年11月8日上海帆软用户大会

2024年11月8日上海帆软用户大会 2024年11月8日，上海成功举办了帆软用户大会，主题为“数字聚力，绽放新机”。大会汇聚了众多行业专家和企业代表，共同探讨数字化转型和商业智能领域的最新趋势和实践。大会亮点： 专家…...

编程日记 2024/11/10 8:36:26

信息泄露漏洞一文速通

文章目录信息泄露漏洞一文速通敏感信息の概念敏感信息の分类企业敏感信息用户敏感信息站点敏感信息如何挖掘信息泄露漏洞？信息泄露风险清单（checklist）未授权访问类文件与数据泄露开发与调试信息泄露公共配置文件泄露其他敏感信息泄露点威…...

编程日记 2024/11/10 8:32:22

Android 启动时应用的安装解析过程《二》

上一篇内容说到InitAppsHelper这个类的initSystemApps函数，只说了一下几个重要参数的来源还没展开，这里继续，有兴趣的可以看链接: Android 启动时应用的安装解析过程《一》一、系统应用的扫描安装 /*** Install apps from system dirs.*/Gu…...

编程日记 2024/11/10 8:31:20

智谱AI:ChatGLM强大的生成式语言模型

目录智谱AI:ChatGLM强大的生成式语言模型一、ChatGLM的定义与特点二、ChatGLM的应用场景三、举例说明四、注意事项智谱AI:ChatGLM强大的生成式语言模型它通过对话的方式能够生成自然流畅的文本，这一特性使其在多个领域都有广泛的应用潜力，特别是在智能对话和智能…...

编程日记 2024/11/10 8:29:18

git tag

已经发布了 v1.0 v2.0 v3.0 三个版本，这个时候，我突然想不改现有代码的前提下，在 v2.0 的基础上加个新功能，作为 v4.0 发布。就可以检出 v2.0 的代码作为一个 branch ，然后作为开发分支。要查看仓库中的所有标签 gi…...

编程日记 2024/11/10 8:24:13

Golang--反射

1、概念反射可以做什么? 反射可以在运行时动态获取变量的各种信息，比如变量的类型，类别等信息如果是结构体变量，还可以获取到结构体本身的信息(包括结构体的字段、方法)通过反射，可以修改变量的值，可以调用关联的方法…...

编程日记 2024/11/10 8:19:08

ABAP：SET CURSOR FIELD设置鼠标焦点

SET CURSOR FIELD <字段名>：设置鼠标焦点到该字段 SET CURSOR 设置到鼠标焦点列还是行 SET CURSOR LINE 设置鼠标焦点到行 GET CURSOR field <字段名> ：这个相对应的获取鼠标焦点得到的字段...

编程日记 2024/11/10 8:15:03

【专题】2024年全球生物医药交易报告汇总PDF洞察（附原数据表）

原文链接：https://tecdat.cn/?p38191 在当今复杂多变的全球经济环境下，医药行业正面临着诸多挑战与机遇。2024 年，医药行业的发展态势备受关注。一方面，全球生物医药交易活跃，2021 - 2023 年的交易中，已…...

编程日记 2024/11/10 8:13:01

LabVIEW气体检测系统

随着工业化进程的加速，环境污染问题愈加严峻，尤其是有害气体的排放对人类生存环境构成了严重威胁。为了更好地监测这些有害气体，开发一个高效、准确且易于操作的气体检测系统显得尤为重要。LabVIEW软件开发的气体检测系统，采用激光…...

编程日记 2024/11/10 8:08:57

LeetCode78. 子集（2024秋季每日一题 58）

给你一个整数数组 nums ，数组中的元素互不相同。返回该数组所有可能的子集（幂集）。解集不能包含重复的子集。你可以按任意顺序返回解集。示例 1： 输入：nums [1,2,3] 输出：[[],[1],[2],[1,2],[3…...

编程日记 2024/11/10 8:06:52

推荐一款功能强大的视频修复软件：Apeaksoft Video Fixer

Apeaksoft Video Fixer是一款功能强大的视频修复软件，专门用于修复损坏、不可播放、卡顿、画面失真、黑屏等视频问题。只需提供一个准确且有效的样本视频作为参考，该软件就能将受损视频修复到与样本视频相同的质量。该软件目前支持MP4、MOV、3GP等格式的…...

编程日记 2024/11/10 7:59:43

Golang--网络编程

1、概念网络编程：把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统，从而使众多的计算机可以方便地互相传递信息、共享数据、软件、数据信息等资源。客户端（Client） 客户端是请求服务…...

编程日记 2024/11/10 7:57:41

区块链技术在数字版权管理中的应用

💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》区块链技术在数字版权管理中的应用区块链技术在数字版权管理中的应用区块链技术在数字版权管理中的应用引言区块链技术概述 …...

编程日记 2024/11/10 7:56:40

WPS单元格重复值提示设置

选中要检查的所有的单元格设置提示效果当出现单元格值重复时，重复的单元格就会自动变化要修改或删除，点击...

编程日记 2024/11/10 7:55:39

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...

编程新知 2025/9/14 19:44:52

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/7 13:08:40