关于前端学习的思考-浮动元素和块级元素的关系

news2024/10/6 9:18:31

先摆关系:浮动元素嵌套块级元素,浮动元素和块级元素是上下关系。

1、浮动元素为父盒子,块级元素为子盒子。

43003fdbfd074df6a00c9c850fbd8ca8.png

父盒子为浮动元素,子盒子不会继承。如图float=none;

摆结论:子盒子为行内元素,行内块元素和块级元素,子盒子都会随着父盒子移动。

2、块级元素为父盒子,浮动元素为子盒子。

6e4b790cc5d54e7cb9fdfa15203cce4f.png

20b8d0abd73d458cadd7404e8c5d6f1a.png

同理,又如上述两张图片,父标子浮的情况下,父盒子也会带着子盒子移动。

综上所述,父盒子会带着子盒子移动,浮动元素只会使得高度塌陷,例如子盒子为浮动元素,父盒子不会撑满,只有清除浮动,才能保留子盒子的高度,重新撑满父盒子。

清除浮动的两种方法

父级元素使用::after

浮动元素下方写一个div,并清除浮动。

3、浮动元素在上,块级元素在下。

如果浮动元素里面有图片和文字,会形成文字,图片环绕效果,先右弹,后左弹。

4、块级元素在上,浮动元素在下。

浮动元素不会影响前面的块级元素。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1271133.html

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

相关文章

智能优化算法应用:基于群居蜘蛛算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于群居蜘蛛算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于群居蜘蛛算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.群居蜘蛛算法4.实验参数设定5.算法结果6.参考…

excel 计算断面水质等级

在工作中遇到根据水质监测结果要判断断面等级。写了下面的公式: 因子标准值 limits {COD: [15,15, 20, 15,20],氨氮: [0.15, 0.5, 1, 1.5, 2.0],总磷: [0.02, 0.1, 0.2, 0.3, 0.4] } excel公式: IFS(MAX(IF(M2>20,1,0), IF(N2>2,1,0), IF(O2&g…

夜莺项目发布 v6.4.0 版本,新增全局宏变量功能

大家好,夜莺项目发布 v6.4.0 版本,新增全局宏变量功能,本文为大家简要介绍一下相关更新内容。 全局宏变量功能 像 SMTP 的配置中密码类型的信息,之前都是以明文的方式在页面展示,夜莺支持全局宏变量之后,可…

SpringMvc集成开源流量监控、限流、熔断降级、负载保护组件Sentinel | 京东云技术团队

前言:作者查阅了Sentinel官网、51CTO、CSDN、码农家园、博客园等很多技术文章都没有很准确的springmvc集成Sentinel的示例,因此整理了本文,主要介绍SpringMvc集成Sentinel SpringMvc集成Sentinel 一、Sentinel 介绍 随着微服务的流行&…

SpringBoot Bean解析

Bean解析 IOC介绍 松耦合灵活性可维护 注解方式配置Bean 实现方式1: Component声明,直接类上进行添加注解, 同时保证包扫描能扫到即可实现方式2: 配置类中使用Bean Configuration public class BeanConfiguration implements SuperConfiguration{Bean("dog")Ani…

【开源】基于JAVA的大学计算机课程管理平台

项目编号: S 028 ,文末获取源码。 \color{red}{项目编号:S028,文末获取源码。} 项目编号:S028,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2…

AtCoder Beginner Contest 330 A~F

A.Counting Passes(暴力) 题意&#xff1a; 给定 n n n个学生的分数&#xff0c;以及及格分 x x x &#xff0c;问多少人及格了。 分析&#xff1a; 暴力枚举&#xff0c;依次判断每个学生的分数即可。 代码&#xff1a; #include <bits/stdc.h> using namespace s…

Stability AI 新发布SDXL Turbo:一款实时文本到图像生成模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Word异常退出文档找回怎么操作?4个正确恢复方法!

“刚刚我在用word编辑文档&#xff0c;但是突然word就显示异常了&#xff0c;然后莫名其妙就自动退出了&#xff0c;这可怎么办&#xff1f;我还有机会找回这些文档吗&#xff1f;” 当我们在使用Microsoft Word时&#xff0c;突然遭遇到程序异常退出的情况&#xff0c;可能会让…

四个方法,设置excel文件只读模式

由于excel文件经常用于数据文件&#xff0c;数据就需要特别保护&#xff0c;大家可能需要将文件设置为只读模式来保护数据不被修改&#xff0c;Excel文件想要设置为只读的方法有很多&#xff0c;今天分享四种方法给大家&#xff1a; 方法一&#xff1a;文件属性 右键点击文件…

面试篇之微服务(一)

目录 概览 1.什么是微服务&#xff1f; 2.微服务带来了哪些挑战&#xff1f; 3.现在有哪些流行的微服务解决方案&#xff1f; 这三种方案有什么区别吗&#xff1f; 4.说下微服务有哪些组件&#xff1f; 注册中心 5.注册中心是用来干什么的&#xff1f; 6.SpringCloud可…

Android Studio Giraffe-2022.3.1-Patch-3安装注意事项

准备工作&#xff1a; android studio下载地址&#xff1a;https://developer.android.google.cn/studio/releases?hlzh-cn gradle下载地址&#xff1a;https://services.gradle.org/distributions/ 比较稳定的网络环境&#xff08;比较android studio相关的依赖需要从谷歌那边…

spring cloud Eureka注册中心和Nacos注册中心

文章目录 Eureka注册中心.Eureka的结构和作用搭建eureka-server创建 服务引入eureka依赖编写启动类编写配置文件启动服务 服务注册1&#xff09;引入依赖2&#xff09;配置文件3&#xff09;启动多个user-service实例 服务发现1&#xff09;引入依赖2&#xff09;配置文件3&…

日本MF备案注册数据库-在线免费查询

在日本&#xff0c;药物主文件&#xff08;DMF&#xff09;称为“主文件”或“MF”。 药物主文件&#xff08;DMF&#xff09;系统允许活性药物成分&#xff08;API&#xff09;的制造商向日本审查机构&#xff08;PMDA&#xff09;提交API的详细信息&#xff08;制造方法、数…

免费的电脑AI写作工具-5款好用的智能AI写作软件

随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;电脑AI写作已经成为现代写作领域的一项不可或缺的工具。通过深度学习和自然语言处理的融合&#xff0c;AI写作软件得以模拟人类的创造性和表达能力&#xff0c;为我们提供了快速、高效地生成优质文字内容的可…

硫酸钡行业分析:预计2028年将达到8.3亿美元

硫酸钡常用于消化道造影&#xff0c;据国内使用者报道&#xff0c;粗细不匀型硫酸钡&#xff0c;优于细而匀的硫酸钡。硫酸钡是一种用于白色颜料、纸张、橡胶、X光检查时使用的填充剂。具有低硬度、接近直角交叉的完全解理、高密度、遇盐酸不起泡沫的板状结晶&#xff0c;与类似…

论文阅读——SEEM

arxiv: 分割模型向比较灵活的分割的趋势的转变&#xff1a;封闭到开放&#xff0c;通用到特定、one-shot到交互式。From closed-set to open-vocabulary segmentation&#xff0c;From generic to referring segmentation&#xff0c;From one-shot to interactive segmentati…

微服务--06--Sentinel 限流、熔断

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.微服务保护雪崩问题服务保护方案1.1.请求限流1.2.线程隔离1.3.服务熔断 2.Sentinel2.1.介绍和安装官方网站&#xff1a;[https://sentinelguard.io/zh-cn/](https…

如何使用MES管理系统管理与统计员工绩效

MES管理系统解决方案在生产流程优化中发挥着至关重要的作用&#xff0c;特别是在员工绩效的统计与管理方面。本文深入探讨了MES管理系统如何通过多种方式&#xff0c;包括实时数据采集、生产过程可视化、以及绩效指标设定与评估&#xff0c;以更精准、全面的方式统计员工绩效&a…

儿童绘本故事之乐小鱼的龙舟体验

《乐小鱼的龙舟体验》 Chapter 1: 破浪前行的盛宴在2023年11月26日的清晨&#xff0c;顺德迎来了一场震撼心灵的盛宴——中国龙舟大奖赛。湖面上&#xff0c;龙舟竞渡&#xff0c;破浪前行&#xff0c;为这座城市注入了一份激情的节奏。On the morning of November 26, 2023, …