格式化上下文(就是盒子排列渲染的规则)
是页面上的一个隔离独立的渲染区域,规定了常规流中的盒子怎么布局。
在常规流中,所有的盒子(不管是内联盒子(内联元素等)还是块级盒子(块级元素等)都要属于一个格式化上下文,不是属于块级格式化上下文就是属于内联格式化上下文,但是不能同时属于两者。
常规流大体规则:
规定了元素从上到下,左到右排列.
常规流的具体规则分为:
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