CSS3_BFC（十二）
BFC
MDN对BFC的解释：块格式化上下文（Block Formating Context, BFC）是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
1、开启BFC
flow-root对内容的影响是最低的，但是IE浏览器不支持。
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格：table、thead、tbody、th、td、tr、caption
- overflow的值不为visible的块元素
- 伸缩元素
- 多列容器
- column-span为all的元素（即使该元素没有包裹在多列容器中）
- display的值，设置为flow-root
2、BFC作用
- 元素开启BFC后，其子元素不会再产生margin塌陷问题；
- 元素开启BFC后，自己不会被其他浮动元素所覆盖；
- 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷。
3、mrgin塌陷的解决
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>示例</title><style>body {display: flex;}.outer {width: 500px;background-color: aqua;/* 浮动元素 *//* float: left; *//* 开启定位元素 *//* position: relative; *//* 行内块元素 *//* display: inline-block; *//* 表格单元格 *//* display: table; *//* overflow不为visible *//* overflow: hidden; *//* 多列容器 *//* column-count: 1; *//* column-span: all; *//* display: flow-root; */}.inner {height: 200px;width: 200px;margin: 20px;}.inner1 {background-color: yellow;}.inner2 {background-color: blueviolet;}</style>
</head><body><div class="outer"><div class="inner inner1"></div><div class="inner inner2"></div></div>
</body></html>
相关文章：
CSS3_BFC（十二）
BFC MDN对BFC的解释：块格式化上下文（Block Formating Context, BFC）是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 1、开启BFC flow-root对内容的影响是最低的&am…...
C0032.在Clion中使用MSVC编译器编译opencv的配置方法
使用MSVC编译器编译opencv的配置方法...
微信小程序中会议列表页面的前后端实现
题外话：想通过集成腾讯IM来解决即时聊天的问题，如果含语音视频，腾讯组件一年5万起步，贵了！后面我们改为自己实现这个功能，这里只是个总结而已。 图文会诊需求 首先是个图文列表界面 同个界面可以查看具体…...
WEB攻防-通用漏洞文件上传二次渲染.htaccess变异免杀
知识点： 1、文件上传-二次渲染 2、文件上传-简单免杀变异 3、文件上传-.htaccess妙用 4、文件上传-PHP语言特性 1、上传后门时，文件内容带.就不行 这时可以上传一个转换后的ip地址，ip地址对应网站包含后门代码 转换后的int会在访问的时候…...
vue实现列表滑动下拉加载数据
一、实现效果 二、实现思路 使用滚动事件监听器来检测用户是否滚动到底部，然后加载更多数据 监听滚动事件。检测用户是否滚动到底部。加载更多数据。 三、案例代码 <div class"drawer-content"><div ref"loadMoreTrigger" class&q…...
全面解析：HTML页面的加载全过程(四)--浏览器渲染之样式计算
主线程遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。 通过前面生成的DOM 树和 CSSOM 树，遍历 DOM 树，为每一个 DOM 节点，计算它的所有 CSS 属性，最后会得到一棵带有…...
#Verilog HDL# 谈谈代码中如何跨层次引用
目录 一 先谈作用问题 二 再谈跨层次问题 2.1 向下引用 2.2 向上引用 一 先谈作用问题 大多数编程语言都有一个称为作用域（scope）的特征，它定义了代码的某些部分对于变量和方法的可见性。作用域定义了一个命名空间，以避免同一命名空间内不同对象名称之间的冲突。 V…...
LeetCode 每日一题 2024/11/18-2024/11/24
记录了初步解题思路 以及本地实现代码；并不一定为最优 也希望大家能一起探讨 一起进步 目录 11/18 661. 图片平滑器11/19 3243. 新增道路查询后的最短距离 I11/20 3244. 新增道路查询后的最短距离 II11/21 3248. 矩阵中的蛇11/22 3233. 统计不是特殊数字的数字数量1…...
客户流失分析综述
引言 客户流失这个术语通常用来描述在特定时间或合同期内停止与公司进行业务往来的客户倾向性[1]。传统上，关于客户流失的研究始于客户关系管理（CRM）[2]。在运营服务时，防止客户流失至关重要。过去，客户获取相对于流失…...
基于51单片机的红包抽奖proteus仿真
地址： https://pan.baidu.com/s/1nYZlLb64kdZAWSydT_uHfA 提取码：1234 仿真图： 芯片/模块的特点： AT89C52/AT89C51简介： AT89C52/AT89C51是一款经典的8位单片机，是意法半导体（STMicroelectro…...
cangjie (仓颉) vscode环境搭建
sdk下载 下载中心-仓颉编程语言官网 可选择半年更新版，不用申请。目前版本：0.53.13 ，选择不同平台压缩包下载解压到任意位置即可 补充下载，vscode插件解压后，在vscode扩展中选择从vsix安装，安装后新增名为…...
阿里云私服地址
1.解压apache-maven-3.6.1-bin 2.配置本地仓库：修改conf/dettings.xml中的<localReoisitory>为一个指定目录。56行 <localRepository>D:\apache-maven-3.6.1-bin\apache-maven-3.6.1\mvn_repo</localRepository> 3.配置阿里云私服：…...
HTMLCSS：3D金字塔加载动画
效果演示 这段代码通过CSS3的3D变换和动画功能，创建了一个旋转的金字塔加载动画，每个侧面都有不同的颜色渐变，底部还有一个模糊的阴影效果，增加了视觉的立体感。 HTML <div class"pyramid-loader"><div cl…...
(3))
shell编程(2)(3)
目录 一、永久环境变量 按用户设置永久环境变量 文件路径： 示例步骤： 删除永久环境变量 二、脚本程序传递参数怎么实现 三、用编程进行数学运算 shell中利用expr进行运算 运算与变量结合 1. 变量赋值和基本运算 2. 使用expr进行运算 3. 变量…...
DFT专家分析scan insertion时使用EDT的策略
作为一名芯片设计DFT工程师专家，在做scan insertion（扫描插入）时使用EDT（Embedded Deterministic Test，嵌入式确定性测试）的参数配置策略，需要综合考虑多个方面的因素，以确保测试的高…...
Apple Vision Pro开发003-PolySpatial2.0新建项目
unity6.0下载链接:Unity 实时开发平台 | 3D、2D、VR 和 AR 引擎 一、新建项目 二、导入开发包 com.unity.polyspatial.visionos 输入版本号 2.0.4 com.unity.polyspatial（单独导入），或者直接安装 三、对应设置 其他的操作与之前的版本相同…...
分公司如何纳税
分公司不进行纳税由总公司汇总纳税“子公司具有法人资格，依法独立承担民事责任;分公司不具有法人资格，其民事责任由公司承担。”企业设立分支机构，使其不具有法人资格，且不实行独立核算，则可由总公司汇总缴纳企业所得税…...
在 Ubuntu 系统上安装 npm 环境以及 nvm（Node Version Manager）
在 Ubuntu 系统上安装 npm 环境以及 nvm（Node Version Manager） 步骤 1: 更新系统包步骤 2: 安装 nvm步骤 3: 安装 Node.js 和 npm步骤 4: 设置默认 Node.js 版本（可选）总结 在 Ubuntu 系统上安装 npm 环境以及 nvm（No…...
深度优先搜索（dfs）题目合集
深度优先搜索（dfs）题目合集 全排列问题 dfs原理和模版深度优先搜索原理（纯个人理解）参考程序dfs通用模版 素数环组合的输出 剪枝新dfs模版参考程序新的dfs模版 自然数的拆分 利用形参进行回溯 全排列问题 dfs原理和模版 P1706 全…...
性能监控利器：Ubuntu 22.04 上的 Zabbix 安装与配置指南
简介 今天我们来聊聊如何在 Ubuntu 22.04 上安装和配置 Zabbix。我们会用到 PostgreSQL 作为数据库后端，Nginx 作为 Web 服务器，并用 Let’s Encrypt SSL 证书来保驾护航。 什么是 Zabbix？ Zabbix 是一个开源的网络监控和管理解决方案&…...
springboot+vue基于web的校园招聘求职系统
目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块划分关键技术实现数据安全设计扩展性考虑项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作同行可拿货,招校园代理 ,本人源头供货商 系统功能模块划分 后端（S…...
【DexGraspNet与多指手抓取算法详解】第六章 运动规划与轨迹优化
目录 第六章 运动规划与轨迹优化 6.1 从静态姿态到动态轨迹 6.1.1 抓取前运动规划 6.1.1.1 快速扩展随机树 (RRT) 6.1.1.1.1 状态空间采样 6.1.1.1.2 碰撞检测机制 6.1.1.2 轨迹平滑处理 6.1.1.2.1 B样条插值 6.1.1.2.2 速度与加速度约束 6.2 基于优化的轨迹生成 6.…...
WebGL开发者必备：用RenderDoc旧版本抓帧调试的完整避坑指南（附DEBUG_CHROME.bat脚本）
WebGL开发者必备：用RenderDoc旧版本抓帧调试的完整避坑指南（附DEBUG_CHROME.bat脚本） 最近在WebGL开发中遇到一个棘手问题：最新版RenderDoc已经禁止了对Chrome等浏览器的抓帧功能。这对于正在学习图形学课程（比如GAMES…...
从LC谐振到信号振铃：用Multisim仿真带你理解PCB上的阻尼振荡
从LC谐振到信号振铃：用Multisim仿真揭示PCB阻尼振荡的本质 1. 振铃现象：硬件工程师的"噩梦" 第一次在示波器上看到信号边沿那些诡异的振荡波形时，我差点以为自己的电路板被某种神秘力量干扰了。这种被称为"振铃"的现象…...
【AI+实战】零基础部署私人ChatGPT网站：从NextChat到功能定制
1. 为什么你需要一个私人ChatGPT网站？ 最近两年AI对话机器人的火爆程度，相信大家都有目共睹。但你是否遇到过这些问题：公共平台经常排队、担心隐私泄露、或者想要定制专属功能？这就是为什么越来越多的个人和小团队开始搭建自己的C…...
告别文献堆砌！PaperXie AI 文献综述：重构学术写作逻辑，3 步打造导师青睐的深度综述
paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPThttps://www.paperxie.cn/ai/journalsReviewedhttps://www.paperxie.cn/ai/journalsReviewed 在学术写作的漫漫长路上，文献综述宛如横亘在无数本科生、研究生面前的 "天堑"—— …...
AutoRaise：macOS窗口悬停管理的技术实现与配置指南
AutoRaise：macOS窗口悬停管理的技术实现与配置指南 【免费下载链接】AutoRaise AutoRaise (and focus) a window when hovering over it with the mouse 项目地址: https://gitcode.com/gh_mirrors/au/AutoRaise AutoRaise是一款基于Objective-C开发的macOS窗…...
别再只用计数器了！手把手教你用Java实现滑动窗口限流（附完整可运行代码）
从零构建高精度滑动窗口限流器：Java实战与生产级优化 深夜的报警短信又一次震醒了你——核心API在整点时刻被突发流量冲垮。翻开监控图表，发现简单的计数器限流就像漏水的篮子，每到时间窗口切换的临界点，系统就会遭遇请求洪峰。这…...
6大维度深度测评：如何挑选最可靠的开源付费墙绕过工具？
6大维度深度测评：如何挑选最可靠的开源付费墙绕过工具？ 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字阅读时代，优质内容的付费壁垒逐渐形成…...
腾讯混元翻译模型HY-MT1.5-1.8B：免费开源，企业级翻译解决方案
腾讯混元翻译模型HY-MT1.5-1.8B：免费开源，企业级翻译解决方案 1. 引言 1.1 为什么选择HY-MT1.5-1.8B 在全球化的商业环境中，语言障碍成为企业拓展国际市场的首要挑战。腾讯混元团队推出的HY-MT1.5-1.8B翻译模型，以其18亿参数的…...