BFC的相关知识

最新推荐文章于 2019-12-10 22:28:00 发布

一号窗

最新推荐文章于 2019-12-10 22:28:00 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

文章标签： BFC 浮动边距重叠

本文链接：https://blog.youkuaiyun.com/a_small_insect/article/details/79518188

BFC（Block Formatting Contexts）

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

原理：

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

那么如何创建BFC呢？

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一号窗

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【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_43013760的博客

11-16

165

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）.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

前端布局中的几个常见概念（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(格式化上下...

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:...

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 基于BP神经网络实现鸢尾花的分类.zip

08-22

Python 基于BP神经网络实现鸢尾花的分类.zip

这篇文章详细介绍了极端灾害下电-气综合能源系统（IGES）的弹性评估方法，并通过MATLAB代码复现了相关模型（论文复现含详细代码及解释）

08-22

内容概要：该论文聚焦于电-气综合能源系统在极端灾害下的弹性评估，提出了一种考虑电网和天然气网络同时受极端事件扰动的系统模型。通过改进故障传播模型、建立电力网络、天然气网络及耦合装置的时变模型、引入储能装置恢复策略，提出了基于蒙特卡罗的弹性评估框架。该方法通过仿真验证，能够更准确地评估电-气综合能源系统的弹性，揭示了天然气网络在极端灾害下的重要性和电力网络的脆弱性，以及耦合效应对系统弹性的影响。适合人群：能源系统研究人员、电力及天然气网络运营管理人员、从事综合能源系统设计与优化的工程师。使用场景及目标：①评估极端灾害下电-气综合能源系统的弹性；②研究电网和天然气网络的耦合效应对系统弹性的影响；③探索储能装置在系统恢复中的作用；④为实际系统的韧性提升提供理论和技术支持。其他说明：论文不仅提供了理论模型，还通过MATLAB代码实现了模型的具体算法，包括系统参数初始化、极端灾害场景生成、最优切负荷计算、弹性评估主程序、结果分析与可视化等。此外，论文指出了现有研究的局限性，并对未来的研究方向进行了展望，如经济优化、灾害特异性建模、多能源耦合系统研究等。

基于Python的习讯云命令行客户端（签到）.zip

08-22

基于Python的习讯云命令行客户端（签到）.zip