BFC(解决高度塌陷的问题)

BFC(解决高度塌陷的问题)

高度塌陷:子元素设置了浮动,父元素的高度随之x

元素开启BFC元素之后的特点:

1.开启BFC的元素不会被浮动的元素所覆盖。

2.开启BFC的父元素和子元素的外边距不会重叠

3.开启BFC的元素可以包含浮动的元素。

可以通过一些特殊的方式开启元素的BFC:

所有开启BFC的方式都不是直接开启都是间接开启的,所以都存在一些副作用。而我们要选的就是副作用比较小的。

1.设置元素的浮动。

将浮动的子元素的父元素也设置浮动,这样存在的问题就是:高度没有消失,但是宽度消失了,因为父元素和子元素都脱离文档流了。

2.将元素设置为行内块元素

display;inline-block;行内块元素不适合作为外部的布局使用。设置为行内块元素之后,宽度又没了。

3.将元素的overflow设置为一个非visible的值。常用方式为设置overflow:hidden,开启BFC(方便快捷,副作用小),auto也可以。

overflow:hidden/auto;

4.使用after伪类来解决高度塌陷的问题

box3清除了box2的影响,把box1撑起来了。完美地解决了高度塌陷的问题,不会产生副作用

高度塌陷问题是表现上的问题,box3的存在没有实际意义,是为了解决高度塌陷的问题。

<!DOCTYPE html><head><meta charset="UTF-8"><title>高度塌陷相关学习</title><style>.box1{border:10px solid red;/*可以使用overflow:hidden开启BFC解决高度塌陷问题*/}.box2{width:100px;height:100px;background-color: greenyellow;float:left;}.box3{clear:both;}</style></head><body><!--输入.box1+.box2+.box3然后按回车就可以出现下面的效果--><div class="box1"><div class="box2"></div><div class="box3"></div><!--box3撑开了box1的高度--></div></body></html>

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

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

相关文章

LeetCode 面试题 01.06. 字符串压缩(443. 压缩字符串)

对于算法题&#xff0c;按题型类别刷题才会更有成效&#xff0c;因此我这里在网上搜索并参考了下 “&#x1f525; LeetCode 热题 HOT 100” 的题型归类&#xff0c;并在其基础上做了一定的完善&#xff0c;希望能够记录自己的刷题历程&#xff0c;有所收获&#xff01;点击下发…

Stable Diffusion 系列教程 - 5 ControlNet

ControlNet和LORA的定位都是对大模型做微调的额外网络。作为入门SD的最后一块拼图是必须要去了解和开发的。为什么ControlNet的影响力如此的大&#xff1f;在它之前&#xff0c;基于扩散模型的AIGC是非常难以控制的&#xff0c;扩散整张图像的过程充满了随机性。这种随机性并不…

激光 GPS 卫星实现无边界精度

GPS 卫星领域已经发生了重大创新&#xff0c;将变得更加精确和强大。我们正在谈论激光后向反射器阵列&#xff08; LRA&#xff09;的发展。 这些可以精确跟踪地球的形状、自转和环境变化&#xff0c;从而扩展卫星的能力。 GPS卫星的主要用途是确定各种情况下的位置&#xff…

C++继承与派生——(7)类型兼容原则

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 站在巨人的肩上&#xff0c;是为了超过…

Unity检测地面坡度丨人物上坡检测

Unity检测地面坡度 前言使用 代码 前言 此功能为&#xff0c;人物在爬坡等功能时可以检测地面坡度从而完成向某个方向给力或者完成其他操作 使用 其中我们创建了脚本GradeCalculation&#xff0c;把脚本挂载到人物上即可&#xff0c;或者有其他的使用方式&#xff0c;可自行…

nodejs+vue+ElementUi摄影预约服务网站系统91f0v

本系统提供给管理员对首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;员工管理&#xff0c;摄影套餐管理&#xff0c;套餐系列管理&#xff0c;客片欣赏管理&#xff0c;摄影预约管理&#xff0c;摄影订单管理&#xff0c;取片通知管理&#xff0c;摄影评价管理&…

oj习题8577 合并顺序表

8577 合并顺序表 若线性表中数据元素相互之间可以比较&#xff0c;且数据元素在表中按值递增或递减&#xff0c;则称该表为有序表。 编写算法&#xff0c;将两个非递减有序顺序表A和B合并成一个新的非递减有序顺序表C。 输入格式 第一行&#xff1a;顺序表A的元素个数 第二行&…

Linux 服务器安全策略技巧:实施网络入侵防御系统

引言 在当今数字化时代,网络安全对于任何企业和个人都至关重要。特别是对于使用Linux服务器的用户来说,实施网络入侵防御系统是确保服务器安全的关键一步。本文将介绍一些Linux服务器安全策略技巧,帮助您保护服务器免受网络入侵的威胁。 1. 更新操作系统和软件 保持操作系…

KEPServerEX 6 之 GE Ethernet 连接FANUC ROBOT机器人实战

GE Ethernet Driver 连接FANUC ROBOT机器人 ---------------------------- GE Fanuc介绍 GE Fanuc是GE公司控制系统部门的一部分,成立于1998年。其主要业务涵盖工业自动化、控制系统、PLC和组态软件等领域。其产品可用于包括自动化、过程自动化、国防、汽车制造、通讯、医疗…

【linux】Linux管道的原理与使用场景

Linux管道是Linux命令行界面中一种强大的工具&#xff0c;它允许用户将多个命令链接起来&#xff0c;使得一个命令的输出可以作为另一个命令的输入。这种机制使得我们可以创建复杂的命令链&#xff0c;并在处理数据时提供了极大的灵活性。在本文中&#xff0c;我们将详细介绍Li…

LangChain.js 实战系列:如何统计大模型使用的 token 使用量和花费

&#x1f4dd; LangChain.js 是一个快速开发大模型应用的框架&#xff0c;它提供了一系列强大的功能和工具&#xff0c;使得开发者能够更加高效地构建复杂的应用程序。LangChain.js 实战系列文章将介绍在实际项目中使用 LangChain.js 时的一些方法和技巧。 统计调用大模型的 to…

Peter算法小课堂—浮点数危机

大家先想想下面这个代码运行结果&#xff1a; #include <bits/stdc.h> using namespace std; int main(){double x5.2;double y4.11.1;cout<<(x<y)<<endl;cout<<x-y<<endl;return 0; } 最终发现&#xff0c; &#xff1f;&#xff1f;&…

Unity之ShaderGraph如何实现瓶装水效果

前言 有一个场景在做效果时,有一个水瓶放到桌子上的设定,但是模型只做了个水瓶,里面是空的,所以我就想办法,如何做出来瓶中液体的效果,最好是能跟随瓶子有液体流动的效果。 如下图所示: 水面实现 水面效果 液体颜色设置 因为液体有边缘颜色和内里面颜色,所以要分开…

WEB渗透—PHP反序列化(十一)

Web渗透—PHP反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩…

【力扣题解】P106-从中序与后序遍历序列构造二叉树-Java题解

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【力扣题解】 文章目录 【力扣题解】P106-从中序与后序遍历序列构造二叉树-Java题解&#x1f30f;题目描述&#x1f4a1;题…

2024 通义语音 AI 技术图景,大模型引领 AI 再进化

自 1956 年达特茅斯会议上&#xff0c;约翰麦卡锡首次提出了“人工智能”这一术语。AI 在此后七十年的发展中呈现脉冲式趋势&#xff0c;每隔 5-10 年会出现一次技术革新和域定。在这一技术探索进程之中&#xff0c;预训练基础模型逐渐成为主流探索方向&#xff0c;受到学术界和…

C#下将点云数据保存为PLY格式

目前没有找到C#下将点云数据保存为PLY格式的库&#xff0c;查看了一下PLY格式&#xff0c;所以自己写了个方法实现点云数据保存PLY格式 public static string SavePointCloudToPLY(string No, float[] x, float[] y, float[] z){ string result "";Task.Run(() >…

基本运算器实验静态随机存储器实验

1.1 基本运算器实验 1. 实验记录 ①运算结果 首先按照实验指导书进行连线&#xff0c;然后打开试验箱电源&#xff0c;把A&#xff0c;B两个数存到寄存器中&#xff0c;然后改变s3 s2 s1 s0 的值&#xff0c;产生脉冲&#xff0c;观察对应的数据总线上的值以及两个标志位。 …

机器学习分类模型

机器学习常见分类模型及特点 机器学习常见分类模型优缺点 决策树模型 决策树&#xff08;Decision Tree&#xff09;是一类常见的机器学习方法&#xff0c;可应用于分类与回归任务&#xff0c;这里主要讨论分类决策树。决策树是基于树结构来进行决策的。下图是使用决策树来决定…

分布式技术之分布式发布订阅通信

文章目录 什么是发布订阅&#xff1f;发布订阅的原理Kafka 发布订阅原理及工作机制 发布订阅的应用 什么是发布订阅&#xff1f; 发布订阅的三要素是生产者、消费者和消息中心&#xff0c;生产者负责产生数据放到消息中心&#xff0c;消费者向消息中心订阅自己感兴趣的消息&am…