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

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

news 2026/2/8 12:07:07

浮动的相关属性

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

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

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

元素浮动之后的特点

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

  • 浮动产生的影响：

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

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

解决浮动产生的影响

  • 浮动产生的一些困扰：
  1. 对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
  2. 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
  • 其实最主要要解决的影响是（父元素高度塌陷），以下是解决方案：
  1. 方案一： 给父元素指定高度。
  2. 方案二： 给父元素设置浮动，带来其他影响。
  3. 方案三： 给父元素设置 overflow:hidden 。
  4. 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both
  • 额外标签：谁需要清除浮动就在该元素后面添加一个空白标签，属性设置为：clear:both

  1. 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动 （推荐使用）

  2. 伪元素 对于其父元素，我们可以给其加上一个类，并对该类进行如下设置：

.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，给父亲盒子加高度，伪元素）

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

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

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

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

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

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

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

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

Python 数据可视化详解教程

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

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

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

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

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

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

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

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

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

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

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

信息泄露漏洞一文速通

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

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

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

上一篇内容说到InitAppsHelper这个类的initSystemApps函数&#xff0c;只说了一下几个重要参数的来源还没展开&#xff0c;这里继续&#xff0c;有兴趣的可以看链接: 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 三个版本&#xff0c;这个时候&#xff0c;我突然想不改现有代码的前提下&#xff0c;在 v2.0 的基础上加个新功能&#xff0c;作为 v4.0 发布。就可以检出 v2.0 的代码作为一个 branch &#xff0c;然后作为开发分支。 要查看仓库中的所有标签 gi…...

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

Golang--反射

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

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

ABAP：SET CURSOR FIELD设置鼠标焦点

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

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

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

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

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

LabVIEW气体检测系统

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

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

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

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

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

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

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

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

Golang--网络编程

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

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

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

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

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

WPS单元格重复值提示设置

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

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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/1/26 21:34:05

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2026/2/4 18:09:49

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/1/23 10:10:53

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/2/7 4:16:41

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24