BFC（Block Formatting Context）块级格式上下文

最新推荐文章于 2023-06-23 00:40:16 发布
最新推荐文章于 2023-06-23 00:40:16 发布
阅读量69 收藏
点赞数
分类专栏： javascript前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cctvcqupt/article/details/117748721
版权

https://juejin.cn/post/6898278714312753159

BFC就是页面上的一个隔离的独立容器，一个独立的渲染区域，容器里面的子元素不会影响到外面的元素。反之也如此。

1、元素浮动之后，父元素高度坍塌，子元素溢出容器

解决：父容器加上display:flow-root

2、浮动元素和未浮动元素重叠在一起，界限不清

解决：给非浮动元素加上display:flow-root

3、父子元素margin重叠

子元素margin会导致父元素也margin

解决：父容器加上display:flow-root

4、相邻垂直元素margin,会合并较小的margin，最终呈现间距为较大的margin

解决：给一个元素包裹一个容器，加上display:flow-root

布里渊区
关注
专栏目录
BFC(Block Formatting contexts): 块级格式上下文
aierwa的博客
12-26 498
BFC(Block Formatting contexts): 块级格式上下文 顾名思义，BFC是将块级盒子里的内容单独给及格式，而使其布局环境独立，不受外界因素影响。   关于BFC的运用： 1.包含浮动元素——自动计算盒子高度 我是浮动元素，我的父元素没有BFC 效果1：  若改为： overflow:hidden;"> 我是浮动元素，我
BFC(Block Formatting Context) 块级格式化上下文
LMX的博客
04-01 104
BFC(Block Formatting Context) 块级格式化上下文 BFC就好像标签的一个属性，可以使一个区域具有独立渲染不影响其他区域的特性。 BFC常用的几个方式 float属性不为none overflow属性不为visible position属性为absolute或fixed display属性为inline-block contain值为layout、content、或paint 多列容器 BFC的用处 避免外边距重叠 清除浮动 阻止元素被浮动元素覆盖 ...
块级格式化上下文BFC（Block Formatting Context）
最新发布
冰的博客
06-23 397
块级格式化上下文（BFC）是WEB页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。具有BFC特性的元素可以看作是隔离了的独立容器（想象成一个独立的箱子），容器内的元素不会在布局上影响到外面的元素（你里箱子里面的物品如何怎么摆放都不会影响到外面），并且BFC具有普通容器所没有的一些特性，且同一个元素不可能同时存在于两个BFC中。
BFC（Block Formatting Context）块级格式化上下文
qq_42760049的博客
04-22 281
Formatting Context 在了解BFC之前,首先要了解下Formatting Context。 Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context ...
BFC：Block Formatting Context（块级格式化上下文本）
weixin_52339077的博客
06-16 180
BFC的作用
BFC（Block Formatting Context）块级格式化上下文之深层解读
XH_jing的博客
02-23 925
BFC（Block Formatting Context）块级格式化上下文 注意：BFC首先是块，其次需要具备下面的条件之一才可以（通俗来说，BFC就好比一所985或者211的高校，想要成为985或者211的高校，它是有前提条件的，首先他得是一所大学，不能拿一个小学来说，就好比BFC得先是块，才是BFC；当满足了前提条件，再需要具备其他的条件才可以。） 在正式说BFC具体内容之前，先说一下Box...
块级格式化上下文 Block formatting context （BFC）
monkeyHI
04-12 382
详情地址：块级格式化上下文 Block formatting context （BFC） 1. Box 视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子。盒子主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。 （1）块盒 当元素的display为block、list-item或ta...
BFC（block formatting context）块级格式化上下文
weixin_44785498的博客
01-12 378
BFC 1 为什么会有BFC？ 从理论上来讲，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此。那么有什么办法让里面的元素和外面元素真正隔离开？因此有了BFC 父元素受子元素影响例子：子元素浮动，父元素的高度被压缩变为 0 2 BFC 的定义 BFC: block formatting context 块级格式化上下文。 BFC的目的就是形成一个完成独立的空间，让空间中的子元素不会影响到外面的元素。 3 如何触发 BFC 触发BFC有4种方式 float 不为 none posit
什么是BFC(Block Formatting Context)(块级格式化上下文)
Azyyan的博客
07-11 783
前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block forma
CSS理解块级格式上下文（BFC）
12-13
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干. 通俗地来说：创建...
css布局之BFC模式（block formatting context）
01-19
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
如何理解 CSS 布局和块级格式上下文
12-03
如标题所示，这篇文章主要是讲 块级格式上下文（BFC，Block Formatting Context） 。你可能没听过这个术语，但只要你曾经使用 过CSS 布局，你就能明白它。理解 BFC 是什么、它如何工作、如何创建一个 BFC 是非常有用...
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 456
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
Electron 打包问题：electron-builder 下载各种依赖出错
热门推荐
布里渊区
02-24 2万+
写在前面：Electron相关的操作还是不要使用CNPM的操作命令，这样后面会遇到各种问题：比如安装某些依赖的问题； 但是原生的NPM命令又很慢，咋怎呢？有办法！使用smart-npm 安装smart-npm npm install --global smart-npm --registry=https://registry.npm.taobao.org/ -------------...
electron 打包之后，如何使用 F12 开启开发者工具？
布里渊区
02-25 1万+
基本代码部分参见下面这篇文章 https://newsn.net/say/electron-devtools-plus.html 但是，还需要在打包的配置依赖中加上几项内容；在package.json文件中： 默认只有dev里面有下面两项依赖 现在，要把这两项也添加到dependencies里面 ...
去掉textarea标签右下角的斜杠
布里渊区
03-25 1万+
坑爹啊，找了半天，终于知道textarea右下角的斜杠怎么去除了 在标签的style里面加上    resize:none;
【已解决】TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'
布里渊区
05-22 1万+
npm run build的时候出现以下异常： TypeError: Cannot destructure property `createHash` of 'undefined' or 'null' 经查，是webpack版本原因，直接升级版本到最新吧，即可解决！ npm add webpack@latest ...
jQuery和Zepto冲突问题【解决】
布里渊区
01-26 1万+
特殊操作下，项目中同时引入这两个文件时，往往会有些冲突，应该加一句代码避免冲突 <script src="~/js/jquery-2.1.4.js"></script> **<script>jQuery.noConflict()</script>** <script src="~/js/zepto.min.js"></script>加这句
深入理解CSS布局与块级格式上下文（BFC）
"理解CSS布局和块级格式上下文的关键在于掌握Block Formatting Context (BFC)的概念，这在CSS布局中起着至关重要的作用。" 在CSS布局中，BFC（Block Formatting Context）是一个独立的渲染区域，其中元素的排列和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值