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 是一个开源的网络监控和管理解决方案&…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践
6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
windows系统MySQL安装文档
概览：本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容，为学习者提供全面的操作指导。关键要点包括： 解压 ：下载完成后解压压缩包，得到MySQL 8.…...