BFC和IFC

最新推荐文章于 2024-01-03 15:38:14 发布
最新推荐文章于 2024-01-03 15:38:14 发布
阅读量88 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/is______/article/details/127588090
版权

什么是FC？

FC（formating context）格式化上下文，是css2.1提出的一个概念

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了子元素如何排列，以及和其他元素的相互关系和相互作用。

常见的FC分为：

BFC（block formating context）和IFC（ inline formating context），他是css提出的一种视觉渲染的概念。

BFC

通常称之为块级格式化上下文

（指页面上的一个标签，但是不一定完全是块级元素。它有指定的满足条件，它有自己的渲染规则，决定了BFC的内部的HTML标签是如何进行定位以及不同的BFC之间如何进行定位。）

w3c对BFC介绍的原文：

翻译原文

就是BFC区域的特点：

  1. 内部的盒子会在垂直方向上，一个接着一个地放置 （标准文档流）

  2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会产生重叠

    • 属于不同的BFC区域的两个相邻的box的margin就不会发生重叠

    • 解决方案：把其中一个box放到一个新BFC区域可以解决margin重叠的问题

  3. 每个元素的左外边缘与包含块的左边相接触（从左到右的格式化，否则相反）。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。（解决浮动元素与非浮动元素的重叠）

  4. BFC的区域不会和浮动盒子重叠

  5. 计算BFC区域的高度时，浮动元素也参与计算

    • 可以解决子元素浮动父元素高度塌陷的问题

  6. BFC 就是页面中一个独立的容器，容器里面的子元素不会影响外面元素，反之也如此

如何变成BFC容器 或者说（如何升级为BFC）或者说（产生BFC的方法）

  • 设置overflow 不为 visible 通常：overflow:hidden

  • 设置position为absolute和fixed（脱离文档流）

  • 设置float不为none（脱离文档流）

  • 设置display为inline-block、flex

  • html 根标签（html本身就是一个BFC容器）

BFC应用场景（能解决什么问题）

场景一：margin垂直方向重叠问题

  • 将相邻的两个盒子中的一个盒子放在一个新的BFC区域里，就可以解决margin重叠的问题。

    <span style="background-color:#f8f8f8"><<span style="color:#770088">!DOCTYPE</span> <span style="color:#117700">html</span>>
<<span style="color:#117700">html</span> <span style="color:#117700">lang</span>=<span style="color:#aa1111">"en"</span>>
<<span style="color:#117700">head</span>>
    <<span style="color:#117700">meta</span> <span style="color:#117700">charset</span>=<span style="color:#aa1111">"UTF-8"</span>>
    <<span style="color:#117700">meta</span> <span style="color:#117700">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#117700">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span>>
    <<span style="color:#117700">title</span>><span style="color:#117700">Document</span></<span style="color:#117700">title</span>>
    <<span style="color:#117700">style</span>>
        <span style="color:#555555">.box1</span>{
            <span style="color:#000000">width</span>: <span style="color:#116644">200px</span>;
            <span style="color:#000000">height</span>: <span style="color:#116644">200px</span>;
            <span style="color:#000000">background-color</span>: <span style="color:#770088">tomato</span>;
            <span style="color:#000000">margin-bottom</span>: <span style="color:#116644">20px</span>;
        }
        <span style="color:#555555">.box2</span>{
            <span style="color:#000000">width</span>: <span style="color:#116644">20die0px</span>;
            <span style="color:#000000">height</span>: <span style="color:#116644">200px</span>;
            <span style="color:#000000">background-color</span>: <span style="color:#770088">pink</span>;
            <span style="color:#000000">margin-top</span>: <span style="color:#116644">50px</span>;
        }
        <span style="color:#555555">.container</span>{
        <span style="color:#aa5500">/*创建BFC容器 解决margin重叠问题*/</span>    
            <span style="color:#000000">overflow</span>: <span style="color:#221199">hidden</span>;
        }
    </<span style="color:#117700">style</span>>
</<span style="color:#117700">head</span>>
<<span style="color:#117700">body</span>>
    <<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"box1"</span>></<span style="color:#117700">div</span>>
    <<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"container"</span>>
        <<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"box2"</span>></<span style="color:#117700">div</span>>
    </<span style="color:#117700">div</span>>
    
</<span style="color:#117700">body</span>>
</<span style="color:#117700">html</span>></span>

场景二：浮动元素与非浮动元素的重叠问题

每个元素的左外边缘与包含块的左边相接触（从左到右的格式化，否则相反）。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。

<span style="background-color:#f8f8f8"><span style="color:#333333"><<span style="color:#770088">!DOCTYPE</span> <span style="color:#117700">html</span>>
<<span style="color:#117700">html</span> <span style="color:#117700">lang</span>=<span style="color:#aa1111">"en"</span>>
<<span style="color:#117700">head</span>>
    <<span style="color:#117700">meta</span> <span style="color:#117700">charset</span>=<span style="color:#aa1111">"UTF-8"</span>>
    <<span style="color:#117700">meta</span> <span style="color:#117700">name</span>=<span style="color:#aa1111">"viewport"</span> <span style="color:#117700">content</span>=<span style="color:#aa1111">"width=device-width, initial-scale=1.0"</span>>
    <<span style="color:#117700">title</span>><span style="color:#117700">Document</span></<span style="color:#117700">title</span>>
    <<span style="color:#117700">style</span>>
        <span style="color:#555555">.container</span>{
            <span style="color:#000000">width</span>: <span style="color:#116644">1200px</span>;
            <span style="color:#000000">height</span>: <span style="color:#116644">600px</span>;
            <span style="color:#000000">border</span>: <span style="color:#116644">1px</span> <span style="color:#221199">solid</span> <span style="color:#770088">red</span>;
        }
        <span style="color:#555555">.aside</span>{
            <span style="color:#000000">width</span>: <span style="color:#116644">200px</span>;
            <span style="color:#000000">height</span>: <span style="color:#116644">300px</span>;
            <span style="color:#000000">background-color</span>: <span style="color:#770088">pink</span>;
            <span style="color:#000000">float</span>: <span style="color:#221199">left</span>;
        }
        <span style="color:#555555">.article</span>{
            <span style="color:#aa5500">/* width: 800px; */</span>
            <span style="color:#000000">height</span>: <span style="color:#116644">400px</span>;
            <span style="color:#000000">background-color</span>: <span style="color:#770088">tomato</span>;
            <span style="color:#aa5500">/* 新的BFC区域不会和浮动元素重叠 */</span>
            <span style="color:#000000">overflow</span>: <span style="color:#221199">hidden</span>;
        }
    </<span style="color:#117700">style</span>>
</<span style="color:#117700">head</span>>
<<span style="color:#117700">body</span>>
    <<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"container"</span>>
        <<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"aside"</span>></<span style="color:#117700">div</span>>
        <<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"article"</span>></<span style="color:#117700">div</span>>
    </<span style="color:#117700">div</span>>
</<span style="color:#117700">body</span>>
</<span style="color:#117700">html</span>></span></span>

场景3：三栏布局 m.jd.com

对于两栏或三栏的自适应布局，包含块的特点，BFC区域不会和浮动元素重叠

方法：html代码结构中，居中盒子需要放在最后，左右两个盒子分别设置左浮动和左浮动，居中盒子设置成BFC容器

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
        <span style="color:#555555">.wrapper</span> <span style="color:#555555">.left</span> {
            <span style="color:#000000">float</span>: <span style="color:#221199">left</span>;
            <span style="color:#000000">width</span>: <span style="color:#116644">200px</span>;
            <span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;
            <span style="color:#000000">background-color</span>: <span style="color:#770088">red</span>;
        }
​
        <span style="color:#555555">.wrapper</span> <span style="color:#555555">.center</span> {
            <span style="color:#000000">background-color</span>: <span style="color:#770088">gray</span>;
            <span style="color:#000000">height</span>: <span style="color:#116644">300px</span>;
            <span style="color:#000000">overflow</span>: <span style="color:#221199">hidden</span>;
        }
​
        <span style="color:#555555">.wrapper</span> <span style="color:#555555">.right</span> {
            <span style="color:#000000">float</span>: <span style="color:#221199">right</span>;
            <span style="color:#000000">width</span>: <span style="color:#116644">200px</span>;
            <span style="color:#000000">height</span>: <span style="color:#116644">150px</span>;
            <span style="color:#000000">background-color</span>: <span style="color:#770088">orange</span>;
        }
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"container"</span><span style="color:#117700">></span>
    <span style="color:#aa5500"><!-- 前面两个盒子一个左浮动，一个右浮动，中间盒子放最后，设置成BFC容器 --></span>
    <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"left"</span><span style="color:#117700">></span>left<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"right"</span><span style="color:#117700">></span>right<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>center<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span></span></span>

场景四：子元素浮动，父元素高度塌陷的问题

计算BFC区域的高度时，浮动元素也参与计算

子元素浮动，将父元素设置为BFC区域，父元素计算高度时，子元素也会计算进去

<span style="background-color:#f8f8f8"><span style="color:#333333"><style>
.all-children-float{
border: 1px saddlebrown solid;
   overflow: hidden;
}
.all-children-float .left {
float: left;
width: 200px;
height: 100px;
background-color:red;
}
.all-children-float .right {
float: right;
width: 200px;
height: 150px;
background-color:orange;
}
</style>
<div class="all-children-float">
    <div class="left"></div>
    <div class="right"></div>
</div></span></span>

面试题：

请具体描述你对BFC的理解？

  • BFC概念：BFC是W3C提出一种元素排列规则，只要当前这个盒子是BFC盒子，那就要满足一些排列规范

  • BFC容器创建了一个独立的空间，这个空间在页面上有一套自己的渲染规则，我们可以使用float、overflow、diplay:inline-block等等创建BFC容器

  • 浮动元素和标准文档流的元素默认会重叠，但是给标准文档流的元素设置BFC，那浮动元素就会和BFC容器一行排列，

    同一容器中的margin会重叠，可以让两个重叠的元素在不同的BFC空间解决

    子元素浮动，父元素高度塌陷，使用BFC解决高度塌陷问题

  • 请简单描述一下三栏式布局

IFC

行级格式化上下文（inline formating context ）

和块格式化上下文一样，它是页面进行CSS视觉渲染时的一个概念。

指的是一行区域的渲染规则，确定了一行中,行内元素如何进行排列以及对齐。

行盒 ——line box（重要概念）

这是一个显示区域，每一行的多个元素共同生成一个行盒模型。（指的是一行内容的整块显示区域）

IFC负责的矩形区域就叫做行盒

宽度：一行中放置的元素的宽度

高度：由子节点的最高点和子节点的最低点来决定。高度其实由font-size、font-family、line-height、height共同决定，决定行内元素的垂直对齐方式vertical-align

绿色：顶线

蓝色：中线

红色：基线

紫色：底线

影响行盒高度的因素

font-size

不同的font-size值会影响行盒的高度

font-family

不同font-family也会影响行盒的高度，取最大值

原因：设计师在设计字体时，不同的字体默认的行高，字体默认的样式是不同，所以不同字体，影响行盒的高度不同。

line-height/height

设置行高会影响行盒的高度，最终显示效果会发生改变；设置元素(行内块级元素)的高度，也会影响行盒的高度

行高的取值范围：它其实是每行上边空白区域的位置，到下一行空白区域的位置。（不是顶线到下一行的顶线）

参考图片

vertical-align：

设置行内元素的垂直方向的对齐方式，同时也会影响行盒的高度

文本之间及文本和图片之间垂直对齐方式：

  • baseline：默认值，以基线对齐

  • middle：中线对齐（重点）

  • text-top：顶线对齐

  • text-bottom：底线对齐

  • top：顶部对齐

  • bottom：底部对齐

文本之间

默认以基线进行对齐

文本和图片

文字和图片之间，可以设置参考线

文本和图片，默认图片的底部和文本的基线对齐

  • 给文本设置vertical-align，图片的底部参考文本vertical-align的值；

  • 给图片设置vertical-align，文本的基线参考图片vertical-align的值；

表格中文字的对齐

可以控制表格中单元格里面的内容在垂直方向上的对齐方式

top：顶部对齐

bottom：底部对齐

middle：居中对齐（默认值）

table表格中，单元格垂直方向上对齐——居中，相当于vertical-align：middle

IFC区域的特点

  1. 在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始。

  2. 在盒子间margin、border和padding的水平方向的值是有效。

  3. 这些盒子允许通过不同的方式进行对齐：他们的底部和顶部允许被对齐，或者通过文字的基线进行对齐。

  4. 行盒的高度由line-height的计算结果决定。

is______
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析CSS里的BFC和IFC的用法
09-24
主要介绍了浅析CSS里的BFC和IFC的用法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
知乎的关于页面加载过程1
08-03
文章讨论了HTML的解析、DOM构建、CSS规则生成、渲染树的构造，以及渲染过程中涉及到的布局和绘制，如简单层与复合层、Chrome的调试工具、资源下载，还有CSS的可视化格式模型，如包含块、控制框、BFC和IFC等概念。...
什么是BFC？
文摘资讯
01-31 350
(1)、什么是BFC与IFCa、BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。 b、BFC是W3C
BFC IFC 总结记录
weixin_33682719的博客
03-20 312
引用参考：https://segmentfault.com/a/1190000017273573?utm_medium=referral&utm_source=tuicool http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html BFC 定义 BFC(Block formatting context)直...
CSS里的BFC和IFC的用法
weixin_33924770的博客
05-10 155
一、BFC Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则 （可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 1、BFC的布局规则例如以下： ①.内部的盒子会在垂直方向，一个个地放置。 ②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。 ③....
BFC（独立容器）
L333555333555的博客
03-31 48
2）、父子元素边距重叠（当父元素并没有设置border 或padding的情况下，给子元素设置的margin-top会直接设置在父元素上面，因为父元素没有边界 BFC化相当于给该元素添加了一个虚拟的边框，父元素的高度由里面还在平面上的 元素和浮动的元素一同撑开）4）、防止浮动元素使父元素高度塌陷（父元素由子元素的高度撑开时，当子元素设置了浮动，父元素就会不显示 没有高度了）BFC 一块独立区域/容器，让处于BFC内部的元素与外部元素互相隔离。overflow visible除外。float none除外。
BFC是什么？有哪些应用场景？一次搞懂BFC，通俗易懂！
SmileLife123的博客
02-21 1789
BFC（Block Formatting Context）中文译为"块级格式化上下文"，简单来说，BFC就是给盒子加一个属性，让盒子变成一块独立渲染的区域，可以理解为一个箱子，箱子里面物品的摆放是不受外部影响。
前端学习路线好方法.docx
11-23
此外，我们还需要了解 CSS 的常用选择器、层叠规则、BFC 和 IFC 等知识点。 在学习 JavaScript 时，我们需要了解基础知识点，如类型转换、this 作用域、原型链、继承、闭包等。此外，我们还需要了解 JavaScript 的...
常见的一些面试题和一些css技巧，就是、技巧.zip
最新发布
03-16
- BFC（块格式化上下文）和IFC（独立格式化上下文）的概念及其影响。 - CSS优先级计算：理解如何计算选择器权重，包括内联样式、ID、类和元素选择器的权重。 4. 实践技巧： - CSS调试：学会使用浏览器开发者工具...
【谈谈你对BFC的理解？】
m0_45991266的博客
09-16 1086
官方定义：BFC（Block Formatting Context）块格式化上下文， 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单的理解：BFC就是一个块级容器，它会隔离外部，让盒子里面的元素不影响外面的元素，也就是在搭建页面的时候，不影响外面的布局。1、可以利用BFC解决两个相邻元素的上下margin重叠问题；2、可以利用BFC解决高度塌陷问题；3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。
前端中的BFC是什么？
热门推荐
yigetutouzai的博客
07-05 1万+
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 MDN给出的解释是：BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。......
CSS之BFC、IFC、GFC和FFC
tianxieliuhong的博客
11-28 5355
前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   盒子模型作为CSS基础中的基础，曾一度以为掌握了IE和W3C标准下的块级盒子模型即可，但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑。本文尝试全面叙述块级、行级盒子模型的特性。作为近日学习的记录。 何为盒子模型?　　　　　　　　　　　　　　　　　　　　　　　　　　　     盒子模型到底何方神圣居然可以作为C
深入理解BFC和IFC
difw49417的博客
12-26 578
1. 为什么会有BFC和IFC 　　首先要先了解两个概念：Box和formatting context； 　　Box：CSS渲染的时候是以Box作为渲染的基本单位。Box的类型由元素的类型和display属性决定，box的类型分为block-level box 和inline-level box（不包括css3的时候）。不同类型的box参与不同类型的formatting cont...
CSS属性、BFC、IFC
拼搏的夏目
09-23 926
定位属性1.clear 规定哪一侧不允许元素浮动 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧 2.clip 剪裁绝对定位的元素 clip:rect(上top，右right,bottom下，left左) 左和上：裁掉多少写多少 右和下：显示多少写多少3.display 规定元素
浅析CSS里的 BFC 和 IFC
weixin_30472035的博客
01-25 108
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。 它是页面中的一...
BFC定义页面的独立容器
aliven1的博客
05-23 251
一个div内部的样式影响到了它外部div的样式 1.没有浮动时候的样： 2.黄色模块浮动之后，影响了蓝色div的样式
ifc 到底如何渲染，真复杂！
PHP代码的博客
01-03 445
IFC是一种数据模型，基于类定义的面向对象数据模型，关注共享信息的类（而不是软件操作类）主要以c++为主，其中ifcopenshell支持python操作，但是考虑到大批量数据使用python会有性能限制，选择c++和python根据情况来看。java语言的开源库较少，最新的司空学社java仅支持IFC2X3，另一部分apstex IFC Framework网络上教程也较少。如果需要做可视化效果，数据量不大，可以考虑基于bimserver，它是基于网页传输加载的。
前端中BFC，IFC，GFC，FFC分别表示什么意思
02-17
在前端开发中，BFC、IFC、GFC、FFC 是指不同的 CSS 布局上下文，它们分别代表： 1. BFC（块级格式化上下文）：是一个独立的块级渲染区域，具有一定的布局规则，内部的块级元素会按照一定的规则进行排列。BFC 的特点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值