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

BFC(Block formatting context 块级格式化上下文)

1、开启了BFC能解决什么问题?

  1. 给父元素开启BFC,其子元素不会再产生 margin 塌陷问题。
  2. 自己不会被其他浮动元素所覆盖。
  3. 就算其子元素浮动,元素自身高度也不会塌陷。

2、如何开启?

  1. 根元素
  2. 浮动元素
  3. 绝对定位、固定定位的元素
  4. 行内块元素
  5. 表格单元格: table、 thead、 tbody、 tfoot 、 th 、td、tr、caption。
  6. overflow 的值不为 visible 的块元素
  7. 伸缩项目
  8. 多列容器
  9. column-span 为 all 的元素 (即使该元素没有包裹在多列容器中)
  10. display 的值,设置为 flow-root

1. 根元素(html)
2. 浮动元素 (元素的 float 不是 none)
3. 绝对定位元素 ( position 为 absolute 或 fixed)
4. 内联块 ( display: inline-block )
5. 表格单元格 ( display: table; , display: table-cell; , display: table-caption;6. 具有overflow 且值不是 visible 的块元素.
7. 伸缩项目(把父容器变成伸缩容器,如 display:flex;8. column-span: all; column-span 属性指定某个元素应该跨越多少列。 例如 3列: column-span: 3; |三 三 三| 
display: flow-root;

总结

以上9种方式多多少少都有副作用,而display: flow-root;的副作用最低(就是部分浏览器不支持)。

BFC就是这样一个东东,不好下定义,但是可以举例说明。

喝水不忘挖井人,感谢尚硅谷教育的免费课程

相关文章:

BFC(Block formatting context 块级格式化上下文)

1、开启了BFC能解决什么问题? 给父元素开启BFC,其子元素不会再产生 margin 塌陷问题。自己不会被其他浮动元素所覆盖。就算其子元素浮动,元素自身高度也不会塌陷。 2、如何开启? 根元素浮动元素绝对定位、固定定位的元素行内块…...

Leetcode-每日一题【剑指 Offer 14- II. 剪绳子 II】

题目 2、3、3的三段,此时得到的最大乘积是18。 答案需要取模 1e97(1000000007),如计算初始结果为:1000000008,请返回 1。 示例 1: 输入: 2输出: 1解释: 2 1 1, 1 1 1 示例 2: 输入: 10输出…...

bye 我的博客网站

Bye🙋🙋🙋,我的博客网站。在我的服务器上运行了9个月之久的博客网站要和大家Bye了。 背景 可能很多人不知道我的这个博客网站的存在,好吧,最后一次展示它了,博客网站地址在这里,它…...

Llama 2:开放基础和微调聊天模型

介绍 大型语言模型(llm)作为高能力的人工智能助手,在复杂的推理任务中表现出色,这些任务需要广泛领域的专家知识,包括编程和创意写作等专业领域。它们可以通过直观的聊天界面与人类进行交互,这在公众中得到了迅速而广泛的采用。 法学硕士的能力是显著的考虑到训练的表面上…...

JVM工作的总体机制概述

JDK、JRE、JVM关系回顾 JVM:Java Virtual Machine,翻译过来是Java虚拟机JRE:Java Runtime Environment,翻译过来是Java运行时环境 JREJVMJava程序运行时所需要的类库JDK:Java Development Kits,翻译过来是…...

jmeter工具测试和压测websocket协议【杭州多测师_王sir】

一、安装JDK配置好环境变量,安装好jmeter 二、下载WebSocketSampler发送请求用的,地址:https://bitbucket.org/pjtr/jmeter-websocket-samplers/downloads/?spma2c4g.11186623.2.15.363f211bH03KeI 下载解压后的jar包放到D:\JMeter\apache-j…...

国产漏洞扫描器Xray入门,详细教程

国产漏洞扫描器Xray入门,详细教程 1.Xray简介2.快速开始3.使用 xray 代理模式进行漏洞扫描4.使用 xray 基础爬虫模式进行漏洞扫描5.使用 xray 进行服务扫描1.Xray简介 xray 是一款功能强大的安全评估工具,由多名经验丰富的一线安全从业者呕心打造而成,主要特性有: 检测速度…...

LeetCode209. 长度最小的子数组

题目:LeetCode209. 长度最小的子数组 描述: 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, …, numsr-1, numsr] ,并返回其长度。如果不存在符合条件的子…...

css冒号对齐

实现后的样式效果 实现方式 html&#xff1a; <el-col v-if"item.showInSingle ! false" :span"6" style"padding: 4px 0"><label>{{ item.label }}&#xff1a;</label><span v-if"singleData[item.prop] ! 0 &…...

那些年的golang开发经验记录

goland 问题CreateProcess error216, 该版本的 %1 与你运行的 Windows 版本不兼容。请查看计算机的系统信息&#xff0c;然后联系软件发布者 Cannot run program "......" (in directory "D:\project\go\awesomeProject\src\test"): CreateProcess error2…...

element中select下拉框如何实现宽度自适应

简单暴力&#xff1a; element 和 elementPlus 都可以直接在el-select上添加 style"width: 100%" 解决 <el-select style"width: 100%" v-model"cats" multiple filterable placeholder"请选择分类"> . . . </el-select&…...

springboot项目get请求下划线转驼峰@JsonProperty注解失效问题

问题&#xff1a;解决sprigboot项目get请求中有下划线的入参参数&#xff0c;如&#xff1a;first_name&#xff0c;希望在项目中将下划线格式转成firstName&#xff0c;用JsonProperty注解发现失效问题 1.核查&#xff1a;JsonProperty注解对应包是否正确 正确包&#xff1a…...

架构训练营学习笔记:6-2 微服务基础选型

基础选型 微服务基础设施架构 优先级 其中&#xff0c;核心 就是服务注册、服务发现、服务路由。 模式1-嵌入SDK 模式2-反向代理式 模式3-网络代理式&#xff08;Service Mesh&#xff09; 模式对比 常见微服务框架选择 嵌入SDK-dubbo Spring Cloud 反向代理式 APISIX …...

opencv实战项目 实现手势跟踪并返回位置信息(封装调用)

OpenCV 是一个基于 Apache2.0 许可&#xff08;开源&#xff09;发行的跨平台计算机视觉和机器学习软件库&#xff0c;可以运行在Linux、Windows、Android和Mac OS操作系统上。 需要提前准备opencv 和 mediapipe库 pip --default-timeout5000 install -i https://pypi.tuna.tsi…...

ElementUI动态添加表单项

昨天感冒发烧了&#xff0c;脑子不好使。在实现这个动态表单项时一直报错脑瓜子嗡嗡的&#xff01; 不过好在昨天休息好了&#xff0c;今天起来趁脑瓜子好使&#xff0c;一会就弄好了。 这里记录一下 <el-form-itemv-for"(classId,index) in addFom.classIds":lab…...

Myatis和MybatisPlus常见分页方式

Myatis和MybatisPlus常见分页方式 一、mybaits 原生limit分页 SELECT * FROM order_info limit #{pageNow},#{pageSize}分页插件&#xff08;ssm中&#xff0c;通过xml配置分页。springboot通过则通过配置文件&#xff09; PageHelper插件&#xff1a;PageHelper.startPage(…...

利用ChatGPT绘制思维导图——以新能源汽车竞品分析报告为例

随着人们对环境保护的日益关注和传统燃油汽车的限制&#xff0c;全球范围内对新能源汽车的需求不断增长。新能源汽车市场的激烈竞争使得了解各个竞品的特点和优劣成为关键。然而&#xff0c;针对这一领域的详尽竞品分析却常常需要大量时间和精力。 在此背景下&#xff0c;人工智…...

redis集群搭建(非常详细,适合新手)

免密登录脚本 #!/bin/bash # 检查是否已经存在 SSH 密钥对&#xff0c;如果没有则创建一个 if [ ! -f ~/.ssh/id_rsa ]; thenssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa -N fi# 为每个目标主机复制公钥 for ip in 192.168.9.{11..16}; dossh-copy-id -i ~/.ssh/id_rsa.pub …...

CTFshow web93-104关

这周要学习的是php代码审计 根据师兄的作业 来做web入门的93-104关 93关 看代码 进行分析 他的主函数 include("flag.php"); highlight_file(__FILE__); if(isset($_GET[num])){ $num $_GET[num]; if($num4476){ die("no no no!"); …...

ElasticSearch详细操作

ElasticSearch搜索引擎详细操作以及概念 文章目录 ElasticSearch搜索引擎详细操作以及概念 1、_cat节点操作1.1、GET/_cat/nodes&#xff1a;查看所有节点1.2、GET/_cat/health&#xff1a;查看es健康状况1.3_、_GET/_cat/master&#xff1a;查看主节点1.4、GET/_cat/indices&a…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...