Formatting Context 详解

最新推荐文章于 2022-03-21 22:13:02 发布
原创 最新推荐文章于 2022-03-21 22:13:02 发布 · 267 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了BFC(Block Formatting Context)和IFC(Inline Formatting Context)在网页布局中的核心作用，包括如何利用BFC解决元素内部浮动、外边距合并及右侧自适应盒子等问题，同时对比了IFC的主要用途，旨在帮助读者掌握更高级的CSS布局技巧。
1 、 初步了解
主要作用

BFC就是页面上的一个隔离的独立容器,容器内外互不影响。

  • 清除元素内部浮动
  • 外边距合并问题
  • 制作右侧自适应的盒子问题
《Python基础教程》内容总览篇（持续更新中）
weixin_43178406的博客
08-26 31万+
大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为优快云博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理解，而且能够帮助新手快速入门。个人精心开设的《Python基础课程》专栏订阅量接近900，帮助不少同学解决了Bug。
Formatting Context（BFC、IFC、GFC、FFC）
Jeremy_Lin_PC的博客
10-10 288
Box的定义 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 Box的类型 block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block
Formatting Context与布局
crli的博客
03-11 805
BOX 概念：CSS布局的基本单位 解释：BOX是CSS布局的基本单位，元素的类型和dispaly属性，决定了这个元素的的BOX类型，BOX的类型分为： 【block-level box】 display属性值为：block、list-item、table 的元素会生成 block-levle box，并且参与 block formatting context 布局 【inline-le...
CSS-格式化上下文（Formatting Context）
极客神殿
08-26 650
Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 块级格式化上下文，它是指一个独立的块级渲染区域，只有 Block-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 生成 浮动, 绝对定位元素, 和 display 属性为 inline-boxs、table...
面试经常会被问到的BFC和IFC 你知道多少？
weixin_30781775的博客
09-13 632
先了解下BFC和IFC的FC是个啥？FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。 OK，接下来正式举例...
css布局之BFC模式（block formatting context）
01-19
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
详解css边距重叠的几种解决方案
09-27
overflow设置为hidden后，父元素会创建一个新的块格式化上下文（Block Formatting Context），这样可以阻止外边距重叠，因为块格式化上下文会限制元素之间的外边距重叠。 4. 将子元素的display属性设置为inline-...
BFC详解
weixin_47450807的博客
03-21 848
一、写在前面 今天看到一道面试题，主要是关于BFC的理解，下面将针对BFC的相关特性做出总结。 二、何为BFC BFC(Block Formatting Context)格式化上下文，是 web页面中盒子模型布局的CSS渲染模式，指的是一个独立 的渲染区域或者是一个隔离的独立容器。 三、形成BFC的条件 1、浮动元素，float除none以外。 2、定位元素，position(absolute, fixed) 3、display为以下其中之一的值：inline-block,table-cell,table
详解css外边距折叠（margin collapsing）
09-22
- 利用CSS的块格式化上下文（Block Formatting Context，简称BFC），通过设置元素的display属性为inline-block、flex、inline-flex、grid或者表格单元格显示方式，可以创建一个新的块格式化上下文，阻隔外边距折叠。...
格式化上下文formatting contexts
极客神殿
08-18 498
什么是格式化上下文（formatting contexts） Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。 格式化上下文指的是初始化元素定义的环境。包含两个要点，元素定义的环境和初始化。 在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block ...
IFC(Inline formatting contexts)学习
u010552788的专栏
10-17 1391
翻译来自： https://www.w3.org/TR/CSS21/visuren.html#inline-formatting 在IFC中，盒子依次水平排列，从它的包含块的最顶端开始。水平方向的margins、borders和paddin体现在这些盒子之间。这些盒子可以在垂直方向可以以不同的方式对齐：底部对齐、顶部对齐或者以内部文字的基线对齐。包含这些盒子的一行矩形区域成为行框。 行框的宽度由包含
css中的渲染规则：Formatting context，你100%用过它，可惜你不知道！
QUX轻博客
12-14 390
前端开发页面布局必须用到Formatting context，你确实在用，只不过你不知道而已，例如面试经常遇到的BFC-块级格式化上下文，就是其中一个渲染规则，准确...
BFC理解
weixin_33692284的博客
04-11 146
概念 BFC(Block formatting context)块级格式化上下文，它是一个独立的渲染区域。BFC是Web页面的可视化CSS渲染的一部分，是块盒子布局发生的区域，也是浮动元素与其他元素交互的区域。 触发BFC的条件 根元素或者包含根元素的元素 float不为none的浮动元素 position为absolute或fixed的绝对定位元素 overflow不为visible的块元素 ...
BFC环境(block formatting context块级格式化上下文)
ThReE_To的博客
09-27 1009
布局规则： 1.在BFC环境内部的所有元素按照垂直方向上一个接一个的放置； 2.相邻盒子（BOX）在垂直方向的margin值会重叠； 3.内部盒子会以BFC的左边（右边）线接触，浮动也是这样的； 4.BCF区域不会与浮动盒子重叠； 5.BFC环境中的子元素以外界分离，不会影响到外面的元素，而外面的元素也不会影响到BFC里面的元素。 6.BFC中浮动元素
请描述 BFC(Block Formatting Context) 及其如何工作
weixin_41838959的博客
09-04 395
请描述 BFC(Block Formatting Context) 及其如何工作 小课堂【北京-WEB-A组】 分享人：郭晨阳 大家好，我是IT修真院北京分院第35期的学员郭晨阳，一枚正直、纯洁、善良的前端程序员。 今天给大家分享一下，修真院官网css任务15，深度思考中的知识点——请描述 BFC(Block Formatting Context) 及其如何工作 1.背景介绍 我们...
pageContext对象的用法详述
Jason的学习笔记
03-27 732
感谢原文作者：nickcenter 原文链接：https://www.cnblogs.com/nickup/p/9004594.html pageContext对象 这个对象代表页面上下文，该对象主要用于访问JSP之间的共享数据。 pageContext是PageContext类的实例，使用pageContext可以访问page、request、session、application范围的变...
block高度塌陷详解
最新发布
12-26
#### 方法一：触发BFC (Block Formatting Context) 通过创建一个新的块格式化上下文(BFC),可以让该区域内的所有内容重新遵循常规布局规则而不受外部因素干扰。实现这一点的方法有很多，比如给定`overflow:hidden`, ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值