今天遇到几个问题,记录以下,如下:
什么是BFC和IFC?
它们的区别?它们都有什么作用?
怎么形成BFC和IFC?overflow除了hidden还有哪个值可以触发BFC?position除了absolute还有哪个值可以触发?
BFC会与float元素相互覆盖吗?为什么?举例说明。
BFC及格式化上下文
IFC及行内格式化上下文。
相对应的还有FFC(弹性格式化上),GFC(网格布局格式化上下文)。
什么是BFC
上面已经提到了BFC及块级格式化上下文,是块盒子容器在布局过程中的渲染区域。BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,容器外的元素同样不会影响到里面的元素。
BFC是规则内部块级元素格式(摆放规则)的一个独立的环境,对于BFC内的所有的块级元素,有以下的约束规则
1.一个块级元素占据一整行空间,一个接一个从上到下排列。
2.两个同级盒之间的垂直距离由margin属性决定。相邻块级盒之间的垂直margin会出现折叠。BFC里的盒子左侧边缘不会超过BFC,除非这个盒子自己也变成了一个新的BFC。
3.每个盒子的左外边缘包含块左边缘(对于从右到左的格式,右边缘),除非盒子建立了新的块级格式化上下文
4、计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算
5、float的元素区域不会覆盖其他BFC的区域。
如何创建一个BFC
1.根元素(html)
2.float浮动,值不为none时
3.绝对定位元素,absolute或fixed
4.行内块元素,display:inline-block
5.overflow值不为visible的元素
什么是IFC
行内格式化上下文中,IFC由只包含行内级盒子的块容器建立,IFC由只包含行内级盒子(框)的块容器建立,起点是包含快的顶部。水平方向上的margin,border和padding在框之间得到保留,框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。其排列顺序根据书写的设置来决定。对于水平书写模式,各个盒子从左边开始水平地排列对于垂直书写模式,各个盒子从顶部开始垂直地排列
怎么形成一个IFC
1.块级元素中仅包含内联级别元素
需要注意的是当IFC中有块级元素插入时,会产生两个匿名块将父元素分割开来,产生两个IFC。
IFC特性
1.IFC的元素会在一行中从左至右排列,并且垂直方向起点为元素顶部。
2.在一行上的所有元素会在该区域形成一个行框
3.行宽的高度为包含框的高度,高度为行框中最高元素的高度iv)浮动的元素不会在行框中,并且浮动元素会压缩行框的宽度
4.行框的宽度容纳不下子元素时,子元素会换下一行显示,并且会产生新行框vi)行框的元素内遵循text-align和vertical-align
5.子元素只会计算横向样式空间,【padding、border、margin】,垂直方向样式空间不会被计算,【padding、border、margin】。
BFC会与float元素相互覆盖吗
BFC区域不会与float的元素区域重叠
计算BFC的高度时,浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素