块级格式化上下文规则(常规流BFC IFC)

关注

原创 2022-03-06 22:18:39 397 阅读 AI 写同款· GEO 优化 ›

CSS——FC（BFC/IFC/FFC/GFC）超详细版+原理案例分析文章目录一、Box二、FC（Formatting Context）1. BFC1.1 BFC的形成条件一、Box Box 是 CSS 布局的对象和基本单位，一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子： 1、block-level box:display ：属性为 block, li 阅读详情

格式化上下文(就是盒子排列渲染的规则)

是页面上的一个隔离独立的渲染区域，规定了常规流中的盒子怎么布局。
在常规流中，所有的盒子（不管是内联盒子（内联元素等）还是块级盒子（块级元素等）都要属于一个格式化上下文，不是属于块级格式化上下文就是属于内联格式化上下文，但是不能同时属于两者。

常规流大体规则:
规定了元素从上到下,左到右排列.
常规流的具体规则分为:
1.块级格式化上下文(bfc):规定常规流快盒的布局规则
2.行内格式化上下文(ifc):规定常规流行盒的布局规则

注:视觉格式化模型中包含了常规流,而常规流包含了块格式化上下文和行格式化上下文规则。

快级格式化上下文(BFC)

Block Formatting Contexts就是页面上的一个隔离独立的渲染区域，它规定了在该区域中,常规流块盒的布局(就是块元素怎么摆放怎么渲染的区域),也是浮动元素与其他元素交互的区域。

能在内部创建新的BFC的属性：

根元素(html)或其它包含它的元素,覆盖了网页中所有元素(因为所有元素都嵌套在HTML内部,所以说有元素都在HTML创建的BFC中渲染)
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

案例:
看下面的图

A、C、E、F、G元素都在根元素(html)创建的BFC中渲染布局
元素B在A(float)元素创建的BFC中渲染
元素D在元素C(position:absoult)创建的BFC中渲染
元素H在元素G(overflow:hidden)创建的BFC中渲染

在这里插入图片描述

BFC布局规则(也就是常规流快盒的布局规则)：

1.盒子的布局开始是从包含容器的顶部开始的垂直排列。

2.同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠

3.常规流块盒在水平方向上,必须撑满包含快

4.浮动定位和清除浮动时只会应用于同一个BFC内的元素,浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素。

5.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。

6.就是页面上的一个隔离的独立渲染区域，不同的BFC区域，它们进行渲染时互不干扰，创建bfc的元素，隔绝了它内部和外部的联系，内部的渲染不会影响外部的元素(外部可能是别的bfc区域)，反之外部的渲染不会影响内部。

由于BFC是独立的渲染区域所以会发生以下这些情况:
1)创建bfc的元素,它自动计算浮动元素的高度,因为要隔绝内部和外部的联系内部的渲染不能影响外部bfc布局,如果高度塌陷里面的东西跑出去了就影响了外部。只要给元素设置这些属性，则这些元素容器就不受外面的BFC约束了，他会给自己和他包含的元素应用新的BFC。也就是现在这些BFC平起平坐，你管不着我，我管不着你，只是我们两个的BFC规则是一样的。

它自动高度计算浮动元素
.p1{
	width:100px;
	height: 100px;
	float: left;
	background:lightblue;
}
.p2{
	margin-top: 50px;
	border:5px solid red;   
	/* 创建BFC */
	overflow: hidden;    
}   
<div class="p2">
    <div class="p1"></div>
</div>

在这里插入图片描述

2)创建bfc的元素,它的边框盒不会与浮动元素重叠会避开浮动元素,因为里面是独立渲染区域不能和外部相互干扰，所以避开了浮动元素(相当于加了margin-left避开了浮动元)那么margin-left相对包含块的左边缘不是浮动元素。

原理就和clear是一样的增加外边距和清除区域
.p1{
    width:100px;
    height: 100px;
    float: left;
    background:lightblue;
}
.p2{
    background: red;
    height:300px;
    /* 创建BFC */
    overflow: hidden;
}

如果想让bfc元素和普通元素有点距离可以设置margin-right，因为margin-right也是浮动的一部分.

在这里插入图片描述

创建bfc的元素(处在不同的BFC中),不会和它的子元素进行外边距合并因为它们不在同一bfc里面,它们的渲染是互不干扰,你不能说盖BFC里的元素和另外一个BFC中的元素的外边距进行合并,因为该BFC不能影响到另外一个BFC,所以不会出现外边距合并。

垂直外边距不会合并
.p1{
    width:100px;
    height: 100px;
    background:lightblue;
    margin-top: 100px;
}
.p2{
    background: red;
    height:300px;
    /* 在内部创建BFC */
    overflow: hidden;
}

它不会计算absolute元素的高度因为绝对定位完全脱离文档流了,而浮动还跟文档流有一点关系比如:文字或行内元素会为浮动让出位置。

在这里插入图片描述

IFC行内格式化上下文规则：

盒子是水平一个接一个的排列，水平的margin，内边距，边框是可以有的。
垂直方向的对齐，可能是底部对齐，顶部对齐，也可能是基线对齐（这个是默认的）；ps.这里的盒子应该是指的内联元素的盒子（span，strong等）和匿名内联盒子(只有文本，没有内联元素包含，自动创建的)，他们合称内联盒子，一个或者多个内联盒子组成一个行框，行框的宽度由包含块和出现的浮动决定的（为什么有浮动呢，后面解释）；行框的高度决定看我的这篇文章（css之line-height）；一定要分清楚，行框和内联盒子的关系，要不然我所说的你就不太可能理解
行框中的内联盒子的高度小于行框的高度时，内联盒子的垂直方向的对齐方式取决于vertical-align属性
当一个行框水平不能容纳内联盒子时，他们将会在垂直方向上产生多个行框，他们上下一个挨着一个，但是不会重叠
一般来说，行框的左边界紧挨着包含容器的左边界，行框的右边界紧挨着包含容器的右边界，（是两个边都紧挨着）。然而，浮动盒子可能存在于包含边框边界和行框边界之间（后面解释这种情况）；
多个内联盒子的宽度小于包含他们的行框时，他们在水平方向的分布取决于text-align属性（默认是left）

参考于:https://www.cnblogs.com/todayhappy/p/4608476.html

收录于