css中的bfc是什么?

什么bfc?

BFC(Block Formatting Context)块级 格式化 上下文。
BFC就是页面上的一个隔离的独立盒子,容器里面的子元素和外面的元素不会相互影响。

为什么要bfc?

bfc是我们去主动触发的,并不是自动就存在的,它是帮助我们解决css样式的一种方法,它不是一个问题,不是要求我们要怎么去解决bfc问题。

bfc可以用来解决什么问题?

  1. 解决外边距折叠问题
.wrapper{/* 开启BFC *///overflow: hidden;
}
.div1 {width: 100px;height: 100px;background-color: green;margin-bottom: 20px;
}.div2 {width: 100px;height: 100px;background-color: red;margin-top: 20px;
}<div class="wrapper"><div class="div1"></div></div><div class="wrapper"><div class="div2"></div></div>

在这里插入图片描述

这里的外边距就重合了,正常来说应该是40px的,但这里只有20px;这时就可以给父盒子设置overflow: hidden;这样就会触发bfc规则,这样两个盒子的距离就是40px了。

  1. 清除元素内部的浮动
    这里清除浮动的意思并不是清除你设置的元素的浮动属性,而是清除设置了浮动属性之后给别的元素带来的影响。例如我们给子元素设置浮动,那么父元素的高度就撑不开了。

BFC有一个特性:计算BFC的高度时,浮动元素也参与计算,利用这个特性可以清除浮动。

<div class="div1"><div class="son1">a</div><div class="son2">b</div>
</div>.div1 {width: 150px;border: 1px solid red;/*使用BFC来清除浮动,三选一都行*/overflow: hidden;// float: left;// position: fixed;}.son1, .son2 {width: 100px;height: 100px;background-color: blue;float: left;
}.son2 {background-color: greenyellow;
}

在这里插入图片描述
总结:怎么创建bfc规则

  • 给元素设置浮动:float:left,right
  • 给元素设置定位:fixed,absolute
  • 给元素设置overflow值不为 visible
    对的,就是直接给元素设置这些中的某个属性,就可以让盒子成为具有bfc规则的盒子。

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

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

相关文章

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 2

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

数据库与数据仓库的区别及关系

数据库与数据仓库的区别及关系 数据库数据仓库异同差异联系例子 数据库 数据库是结构化信息或数据的有序集合&#xff0c;一般以电子形式存储在计算机系统中。通常由数据库管理系统 (DBMS) 来控制。它是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集…

任务 13、MidJourney种子激发极致创作,绘制震撼连贯画作

13.1 任务概述 通过本次实验任务&#xff0c;学员将深入了解Midjourney种子的概念和重要性&#xff0c;以及种子对生成图像的影响。他们将学会在Midjourney平台中设置种子值并调整其参数&#xff0c;以达到所需的效果。此外&#xff0c;任务还详细介绍了Midjourney V4.0版本中…

openSUSE安装虚拟化 qemu kvm

1) 第一种&#xff1a;图形界面yast安装虚拟化 左下角开始菜单搜索yast 点一下就能安装&#xff0c;是不是很简单呢 2&#xff09;第二种&#xff1a; 命令行安装 网上关于openSUSE安装qemu kvm的教程比较少&#xff0c;可以搜索centos7 安装qemu kvm的教程&#xff0c;然后…

ZAFUACM - 23.8.5个人赛补题

文章目录 A - Lucky Conversion题意思路代码 B - Constanzes Machine题意思路代码 C - Maximum Median题意思路代码 D - Remove Extra One题意思路代码 E - A Determined Cleanup题意思路代码 F - Minimal k-covering A - Lucky Conversion 原题链接 题意 给出两个只包含“4…

vue3登录页面

使用了element-plus <template><div class"login-wrapper"><!-- 背景图或者视频 --><div class"background" style"width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;overflow: hidden;z-index:50;&qu…

vue-baidu-map-3x 使用记录

在 Vue3 TypeScript 项目中&#xff0c;为了采用 标签组件 的方式&#xff0c;使用百度地图组件&#xff0c;冲浪发现了一个开源库 ovo&#xff0c;很方便&#xff01;喜欢的朋友记得帮 原作者 点下 star ~ vue-baidu-map-3xbaidu-map的vue3/vue2版本&#xff08;支持v2.0、v…

使用LLM插件从命令行访问Llama 2

大家好&#xff0c;最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2&#xff0c;这是一项非常重要的进展。Facebook最初的LLaMA模型于今年2月发布&#xff0c;掀起了开源LLM领域的创新浪潮——从微调变体到从零开始的再创造。 如果在Llama 2版本发布之日&a…

《面试1v1》ElasticSearch 和 Lucene

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

DLA 神经网络的极限训练方法:gradient checkpointing

gradient checkpointing 一般来说&#xff0c;训练的过程需要保存中间结果&#xff08;不管是GPU还是CPU&#xff09;。前向传播根据输入(bottom_data)计算输出(top_data)&#xff0c;后向传播由top_diff计算bottom_diff&#xff08;如果某个变量打开梯度进行训练的话&#xff…

Vue 动态引入外部js文件

场景 最近在做项目优化时&#xff0c;发现一个特殊依赖&#xff0c;全局只有一个页面会用到。这个依赖很大&#xff0c;而且这个页面极少有人会打开&#xff08;隐藏页&#xff0c;留给开发或交付人员调试使用的&#xff09;。 那么我们考虑通过引入外部js的形式来处理&#…

5个顶级的开源有限元分析软件

每当我参加数值分析课程的教学时&#xff0c;都会回顾有限元方法的基础知识&#xff0c;很自然地就会出现使用哪种软件的问题。 以下讨论基于三个基本考虑&#xff1a; 在实际应用中&#xff0c;很少有人从头开始编写 FEM 代码。商业 FEM 软件通常在某些预定义的情况下非常易于…

使用 Habana Gaudi2 加速视觉语言模型 BridgeTower

&#x1f917; 宝子们可以戳 阅读原文 查看文中所有的外部链接哟&#xff01; 在对最先进的视觉语言模型 BridgeTower 进行微调时&#xff0c;使用 Optimum Habana v1.6&#xff0c; Habana Gaudi2 可以达到 近 3 倍于 A100 的速度。硬件加速的数据加载以及 fast DDP 这两个新特…

luajit 使用 clang编译的坑

为了尝试将LuaJIT接入虚幻Lua插件之中&#xff0c;需要预编译LuaJIT链接库&#xff0c;在桌面平台问题不大, 主要是移动平台&#xff0c;涉及跨平台编译&#xff0c;因为对跨平台编译具体细节没有系统研究&#xff0c;这里先记录一下跨平台编译LuaJIT的主要过程 由于官方提供的…

Pandas操作Excel

Pandas 是 Python 语言的一个扩展程序库&#xff0c;用于数据分析。 菜鸟教程&#xff1a;https://www.runoob.com/pandas/pandas-tutorial.html 读取Excel pd.read_excel(path,sheet_name,header) path&#xff1a;excel文件路径sheet_name&#xff1a;读取的sheet&#xff0…

3.netty和protobuf

1.ChannelGroup可以免遍历由netty提供,覆盖remove方法即可触发删除channel\ 2.群聊私聊 13.群聊私聊简单原理图 3.netty心跳检测机制,客户端对服务器有没有读写(读,写空闲) //IdleStateHandler(3,5,7,TimeUnite.SECONDS)是netty提供的检测状态的处理器,也加到pipeline,读,写,…

【新版系统架构补充】-嵌入式软件

嵌入式软件 嵌入式软件是指应用在嵌入式计算机系统当中的各种软件&#xff0c;除了具有通用软件的一般特性&#xff0c;还具有一些与嵌入式系统相关的特点&#xff0c;包括&#xff1a;规模较小、开发难度大、实时性和可靠性要求高、要求固化存储。 嵌入式软件分类&#xff1…

react Ref 的基本使用

类组件中使用ref 在类组件中&#xff0c;你可以使用createRef来创建一个ref&#xff0c;并将它附加到DOM元素或类组件实例上。使用ref允许你在类组件中访问和操作特定的DOM元素或类组件实例。 下面是在类组件中使用ref的步骤&#xff1a; 引入React和createRef&#xff1a; …

浅析 C 语言的共用体、枚举和位域

前言 最近在尝试阅读一些系统库的源码&#xff0c;但是其中存在很多让我感到既熟悉又陌生的语法。经过资料查阅&#xff0c;发现是 C 语言中的共用体和位域。于是&#xff0c;趁着课本还没有扔掉&#xff0c;将一些相关的知识点记录在本文。 文章目录 前言共用体 (union)枚举…

Tomcat 的内存配置

修改 Tomcat 的内存配置&#xff0c;你需要调整 Tomcat 的 Java 虚拟机&#xff08;JVM&#xff09;参数。具体来说&#xff0c;你需要修改 catalina.sh&#xff08;Linux/macOS&#xff09;或 catalina.bat&#xff08;Windows&#xff09;脚本中的 JAVA_OPTS 变量。以下是一般…