BFC的相关知识

最新推荐文章于 2021-07-27 19:28:41 发布
原创 最新推荐文章于 2021-07-27 19:28:41 发布 · 287 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#BFC #浮动 #边距重叠

BFC（Block Formatting Contexts）

基本概念：块级，格式化，上下文

原理：

  1. BFC这个元素的垂直方向的边距会发生重叠
  2. BFC的区域不会与浮动元素的float重叠
  3. 独立的容器，内外元素互不影响
  4. 计算BFC高度，浮动元素也参与计算

那么如何创建BFC呢？

  • float不为none的时候
  • position不为static或者relative的时候
  • display为与table相关值的时候
  • overflow为auto，hidden的时候

使用的场景（创建BFC=>验证BFC的区域不会与浮动元素的float重叠）：



那么如何解决BFC这个元素的垂直方向的边距会发生重叠这个问题呢

就是给子元素加个父元素，同时父元素创建一个BFC,即可解决






一号窗
关注
【CSS知识点】——解决高度塌陷以及BFC详解
m0_50785976的博客
10-29 382
高度塌陷以及BFC详解
什么是BFC？如何解决垂直外边距重叠与高度塌陷？看这一篇就够了
tzw14030140049的博客
04-17 816
一、概念 BFC：块级格式上下文 注意：针对块级元素有效，内联元素参考IFC(行级格式上下文) MDN中的解释： 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 创建方式： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具...
BFC相关知识
qq_59641085的博客
07-27 135
1.BFC的概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 2.BFC的特性及应用 （1）BFC内部的Box会在垂直方向，一个接一个的放置。 （2）Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠） （3）BFC的区域不会与float box发生重叠（应用：自...
BFC相关知识点
weixin_43700362的博客
12-10 154
定义 BFC(Block formating context) 直译为“块级格式化上下文”。指页面中的渲染区域，并且拥有一套渲染规则，它决定了其子标签如何定位，以及与其他标签的相互关系和作用。 如何生成BFC 1 根元素（比如html） 2 float的值为left或者right 3 overflow的值为hidden或者scroll或者auto 4 display 的值为inline-block...
学习BFC心得
YYYWx的博客
05-18 499
首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化范围”。      它的作用是决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。      其通俗理解可以理解为一个BFC块就是一个独立的单位，其互不打扰。      BFC块的表现规则有一下几个情况： 在BFC块中的元素，其子元素按照文档流
CSS中的BFC
chenzhifu86886的博客
12-21 153
流体特性 块级元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；如果有 margin 或者 padding 或者 border 等，实际内容区域会响应变窄。 BFC：块级格式化上下文（Block formatting context ）。 它是一个独...
BFC-开源
05-15
通过了解这些知识点，我们可以看到"BFC-开源"不仅是一个编译器，还体现了开源社区的力量和跨平台软件设计的理念。对于开发者来说，这是一个很好的学习和实践编译器构造、跨平台开发以及参与开源协作的机会。
BFC
03-19
最后，生成相关问题，帮助用户进一步理解BFC的应用和深入知识。比如如何解决浮动布局问题，或者外边距折叠的处理方法。这些相关问题应该覆盖用户可能遇到的典型场景，引导他们深入学习。 需要注意使用正确的中文...
工业物联网关软件百数达 （BFC）.pdf
11-06
在实际应用场景中，百数达（BFC）帮助客户固化知识、搭建知识库，并能够智能选择合适的数据进行预测性维护。通过分析数据，判断设备出现状况的原因，从而提前发现问题并进行维护，减少了设备的意外停机时间，提高了...
诱发BFC的原因及处理方案
01-07
本文将深入探讨三种常见的定位方案：普通流、浮动和绝对定位，以及与之相关的Block Formatting Contexts (BFC)的概念、触发条件和实际应用。 **一、定位方案** 1. **普通流 (normal flow)**：这是元素默认的布局...
什么是BFC（初级入门介绍）
小狼驿站
09-23 4050
原文地址链接：http://div.io/topic/834?page=1#3261 说到BFC，就会涉及到CSS布局的一些基本概念，然后，首先来讲一下关于块级盒的一些概念： 下面是来自w3.org中的一句话(参考链接:http://www.w3.org/TR/CSS2/visuren.html#block-formatting)： Block-level ele
HTML和CSS必须知道的重点难点问题
温暖的狗窝窝
07-13 670
1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: center;align-items: center;使用 CSS3 transform父盒子设置: 详情见评论ay:relativeDiv 设置: transform:translate(-50%，-50%);position:absolute;top:...
前端布局中的几个常见概念（FC、BFC）
zhuyunhe的专栏
03-02 6328
写前端的同学都知道CSS盒模型概念，进行CSS布局时，我们常常需要确定一个元素时block类型的块元素还是inline类型的内联元素。FC、BFC、IFC这些概念就和这些元素类型相关。 FC：Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC：Block Formatting Conte
BFC概念及实用场景
张大晴的博客
03-30 1270
参考文章：https://blog.youkuaiyun.com/m0_37585915/article/details/78501760https://zhuanlan.zhihu.com/p/25321647https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.htmlBFC 概念Formatting context(格式化上下...
基于Python实现的信息检索与文本挖掘综合搜索引擎系统-包含网络爬虫模块-网页内容解析与分词处理-索引构建与数据库存储-Web查询服务与结果展示-用于课程大作业与学术研究-技术栈.zip
08-22
jdk1.8基于Python实现的信息检索与文本挖掘综合搜索引擎系统_包含网络爬虫模块_网页内容解析与分词处理_索引构建与数据库存储_Web查询服务与结果展示_用于课程大作业与学术研究_技术栈.zip
一个基于python的文件同步小工具.zip
08-22
一个基于python的文件同步小工具.zip
python3-wxpython4-webview-4.0.7-13.el8.tar.gz
最新发布
08-22
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
基于python的多功能扫描器.zip
08-22
基于python的多功能扫描器.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值