HTML5+css3（浮动，浮动的相关属性，float，解决浮动的塌陷问题，clear，overflow，给父亲盒子加高度，伪元素）
浮动的相关属性
以下使浮动的常用属性值：
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 &…...
【C++ 滑动窗口】2134. 最少交换次数来组合所有的 1 II
本文涉及的基础知识点 C算法：滑动窗口及双指针总结 LeetCode2134. 最少交换次数来组合所有的 1 II 交换 定义为选中一个数组中的两个 互不相同 的位置并交换二者的值。 环形 数组是一个数组，可以认为 第一个 元素和 最后一个 元素 相邻 。 给你一个 二…...
使用 PyTorch 实现并测试 AlexNet 模型，并使用 TensorRT 进行推理加速
本篇文章详细介绍了如何使用 PyTorch 实现经典卷积神经网络 AlexNet，并利用 Fashion-MNIST 数据集进行训练与测试。在训练完成后，通过 TensorRT 进行推理加速，以提升模型的推理效率。 本文全部代码链接：全部代码下载 环境配置 为了保证代码在 GPU 环境下顺利运行，我们将…...
Python 数据可视化详解教程
Python 数据可视化详解教程 数据可视化是数据分析中不可或缺的一部分，它通过图形化的方式展示数据，帮助我们更直观地理解和分析数据。Python 作为一种强大的编程语言，拥有丰富的数据可视化库，如 Matplotlib、Seaborn、Plotly 和 …...
springboot集成opencv开源计算机视觉库
最近项目需要用到opencv，网上看到很多资料都是下载安装并且引入jar包与dll文件，感觉很麻烦，不是我想要的，于是花时间折腾了下，不需要任何安装与引入jar包与dll文件，简单方便，快速上手。 先说说…...
CCF ChinaOSC |「开源科学计算与系统建模openSCS专题分论坛」11月9日与您相约深圳
2024年11月9日至10日，以“湾区聚力 开源启智”为主题的2024年中国计算机学会中国开源大会（CCF ChinaOSC）将在深圳召开。大会将汇聚国内外学术界、顶尖科技企业、科研机构及开源社区的精英力量，共同探索人工智能技术和人类智慧的无…...
2024年11月8日上海帆软用户大会
2024年11月8日上海帆软用户大会 2024年11月8日，上海成功举办了帆软用户大会，主题为“数字聚力，绽放新机”。大会汇聚了众多行业专家和企业代表，共同探讨数字化转型和商业智能领域的最新趋势和实践。 大会亮点： 专家…...
信息泄露漏洞一文速通
文章目录 信息泄露漏洞一文速通敏感信息の概念敏感信息の分类企业敏感信息用户敏感信息站点敏感信息 如何挖掘信息泄露漏洞？信息泄露风险清单（checklist）未授权访问类文件与数据泄露开发与调试信息泄露公共配置文件泄露其他敏感信息泄露点 威…...
Android 启动时应用的安装解析过程《二》
上一篇内容说到InitAppsHelper这个类的initSystemApps函数，只说了一下几个重要参数的来源还没展开，这里继续，有兴趣的可以看链接: Android 启动时应用的安装解析过程《一》 一、系统应用的扫描安装 /*** Install apps from system dirs.*/Gu…...
智谱AI:ChatGLM强大的生成式语言模型
目录 智谱AI:ChatGLM强大的生成式语言模型 一、ChatGLM的定义与特点 二、ChatGLM的应用场景 三、举例说明 四、注意事项 智谱AI:ChatGLM强大的生成式语言模型 它通过对话的方式能够生成自然流畅的文本，这一特性使其在多个领域都有广泛的应用潜力，特别是在智能对话和智能…...
git tag
已经发布了 v1.0 v2.0 v3.0 三个版本，这个时候，我突然想不改现有代码的前提下，在 v2.0 的基础上加个新功能，作为 v4.0 发布。就可以检出 v2.0 的代码作为一个 branch ，然后作为开发分支。 要查看仓库中的所有标签 gi…...
Golang--反射
1、概念 反射可以做什么? 反射可以在运行时动态获取变量的各种信息，比如变量的类型，类别等信息如果是结构体变量，还可以获取到结构体本身的信息(包括结构体的字段、方法)通过反射，可以修改变量的值，可以调用关联的方法…...
ABAP：SET CURSOR FIELD设置鼠标焦点
SET CURSOR FIELD <字段名>：设置鼠标焦点到该字段 SET CURSOR 设置到鼠标焦点列还是行 SET CURSOR LINE 设置鼠标焦点到行 GET CURSOR field <字段名> ：这个相对应的获取鼠标焦点得到的字段...
【专题】2024年全球生物医药交易报告汇总PDF洞察（附原数据表）
原文链接：https://tecdat.cn/?p38191 在当今复杂多变的全球经济环境下，医药行业正面临着诸多挑战与机遇。2024 年，医药行业的发展态势备受关注。 一方面，全球生物医药交易活跃，2021 - 2023 年的交易中，已…...
LabVIEW气体检测系统
随着工业化进程的加速，环境污染问题愈加严峻，尤其是有害气体的排放对人类生存环境构成了严重威胁。为了更好地监测这些有害气体，开发一个高效、准确且易于操作的气体检测系统显得尤为重要。LabVIEW软件开发的气体检测系统，采用激光…...
LeetCode78. 子集（2024秋季每日一题 58）
给你一个整数数组 nums ，数组中的元素 互不相同 。返回该数组所有可能的 子集（幂集）。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1： 输入：nums [1,2,3] 输出：[[],[1],[2],[1,2],[3…...
推荐一款功能强大的视频修复软件：Apeaksoft Video Fixer
Apeaksoft Video Fixer是一款功能强大的视频修复软件，专门用于修复损坏、不可播放、卡顿、画面失真、黑屏等视频问题。只需提供一个准确且有效的样本视频作为参考，该软件就能将受损视频修复到与样本视频相同的质量。该软件目前支持MP4、MOV、3GP等格式的…...
Golang--网络编程
1、概念 网络编程：把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统，从而使众多的计算机可以方便地互相传递信息、共享数据、软件、数据信息等资源。 客户端（Client） 客户端是请求服务…...
区块链技术在数字版权管理中的应用
💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 区块链技术在数字版权管理中的应用 区块链技术在数字版权管理中的应用 区块链技术在数字版权管理中的应用 引言 区块链技术概述 …...
WPS单元格重复值提示设置
选中要检查的所有的单元格 设置提示效果 当出现单元格值重复时，重复的单元格就会自动变化 要修改或删除，点击...
【ElevenLabs阿拉伯文语音实战指南】：20年AI语音工程师亲授7大本地化陷阱与3步高保真合成法
更多请点击： https://intelliparadigm.com 第一章：阿拉伯语语音合成的独特挑战与ElevenLabs能力边界 阿拉伯语语音合成（TTS）面临多重语言学与技术层面的固有挑战，远超拉丁语系语言的常规处理范畴。其核心难点在于右向…...
深入TMS320C6678中断控制器：从CIC、INTC到Event Combiner的底层机制图解
深入解析TMS320C6678中断控制器架构与实现机制 在嵌入式系统开发领域，中断处理机制的设计与实现往往是决定系统实时性和可靠性的关键因素。TMS320C6678作为一款高性能多核DSP处理器，其中断控制系统采用了分层式设计理念，通过片级中断控制器(C…...
如何使用ubuntu搭建一个无盘PC启动服务器
启动windows,1. 安装tftp服务器sudo apt install tftpd-hpa2. 设置tftp,sudo systemctl restart tftpd-hpasudo nano /etc/default/tftpd-hpa# /etc/default/tftpd-hpaTFTP_USERNAME"tftp" TFTP_DIRECTORY"/srv/tftp" TFTP_ADDRESS":69" TFTP_OP…...
2026年好用的录音转文字工具怎么选？从链接提取到实时转写的完整方案
做会议记录、课堂笔记或内容创作时，经常卡在两个问题上：一是录音文件堆积成山不知道从何整理，二是转完文字还要花时间校对和调整。微信里有个叫提词匠的小程序在这类需求里效率比较实用，下面会重点拆解它怎么用，同时也…...
JL-01多通道温湿度记录仪：环境监测的得力助手
在农业、林业与地质研究等领域，环境因子的精准监测是科研与生产决策的核心依据。JL-01多通道温湿度记录仪凭借小巧便携的机身、强大的功能配置与灵活的定制化服务，成为环境数据采集的得力工具，为各类场景下的温湿度监测提供可靠支持。一、功能…...
AssetStudio终极指南：5步解锁Unity游戏资源的完整解决方案
AssetStudio终极指南：5步解锁Unity游戏资源的完整解决方案 【免费下载链接】AssetStudio AssetStudio - Based on the archived Perfares AssetStudio, I continue Perfares work to keep AssetStudio up-to-date, with support for new Unity versions and additio…...
基于MCP协议构建Jira连接器：打通AI助手与项目管理的技术实践
1. 项目概述：当Jira遇上MCP，一个连接器如何重塑项目管理工具链如果你和我一样，长期在软件研发一线摸爬滚打，那么对Jira这个名字一定不会陌生。它几乎是敏捷开发、缺陷跟踪和项目管理的代名词，无数团队用它来规划冲刺、…...
STM32 I2C驱动AT24C02 EEPROM：手把手教你搞定页边界对齐与连续读写（附完整代码）
STM32 I2C驱动AT24C02 EEPROM：页边界对齐与连续读写实战指南 在嵌入式开发中，EEPROM因其非易失性存储特性成为参数保存的首选方案。而AT24C02作为经典的I2C接口EEPROM，其页写入机制却暗藏玄机——许多开发者第一次遭遇"写入数据丢失&quo…...
统信UOS系统管理员必看：一招搞定用户配置文件（.config/autostart）的模板化部署
统信UOS系统配置模板化实战：从屏保设置到全局用户环境部署 在大型企业或教育机构的桌面环境管理中，统信UOS作为国产操作系统的代表，其标准化部署能力直接影响运维效率。当我们在模板用户中精心配置了各项参数——从屏幕保护时间到电源管理策略…...
如何解决Reloaded-II模组加载器安装过程中的依赖循环问题
如何解决Reloaded-II模组加载器安装过程中的依赖循环问题 【免费下载链接】Reloaded-II Universal .NET Core Powered Modding Framework for any Native Game X86, X64. 项目地址: https://gitcode.com/gh_mirrors/re/Reloaded-II Reloaded-II作为一款强大的.NET Core模…...