【css+html】BFC (块级格式化上下文)和IFC (行内格式化上下文)

 

BFC (块级格式化上下文)和IFC (行内格式化上下文)

 

BFC:block(块级) Formatting (格式化) Context (上下文) ,是页面布局一个逻辑。是浏览器对块元素的一个特殊的渲染规则。

渲染规则：

1、内部的box（盒子）

 

 

 

cyf总结：bfc,就是一个容器，垂直方向是一个接着一个放，垂直方向存放的距离由margin决定，上下相邻的bfc

 

 

 

 

 

 

 

 

 

怎么触发BFC

1,根元素html本身就已经是BFC的区域了,不需要任何触发条件;

2.float属性不为none (脱离文档流)

3.position为absolute或fixed

4.display为inline-block,table-cell,takle-caption,flex,inine-flex.overflow不为visible

 

这些属性和属性值在触发bfc时也存在自己的特性

 

 

 

BFC作用:

1、可以解决margin上下边距重叠

2、可以解决高度塌陷;

3、可以实现自适应的多栏布局;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BFC

 

渲染规则：

1.内部的box会在重直方向,一个接一个的放置

2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠

3每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)

4.bfc的区域不会与float box重益

5.bfc就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此

6.计算bfc的高度时,浮动的元素也参与计算演示

怎么触发BFC

1,根元素html本身就已经是BFC的区域了,不需要任何触发条件;

2.float属性不为none (脱离文档流)

3.position为absolute或fixed

4.display为inline-block,table-cell,takle-caption,flex,inine-flex.overflow不为visible

BFC作用:

1、可以解决margin上下边距重叠

2、可以解决高度塌陷;

3、可以实现自适应的多栏布局;

 

 

BFC:block(块级) Formatting（格式化） Context （上下文）, 是浏览器对块元素的一个特殊的渲染规则。

BFC规则有哪些：

1.bfc的区域不会与float box重叠

2.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此

3.计算bfc的高度时，浮动的元素也参与计算

怎么触发BFC:

1.根元素html本身就已经是BFC的区域了，不需要任何触发条件；

2.float属性不为none(left,right)（脱离文档流）

3.position为absolute或fixed

4.display为inline-block,table-cell,table-caption,flex,inine-flex

5.overflow不为visible（hidden,auto,scroll）

BFC作用：

1、可以解决margin上下边距重叠；

2、可以解决高度塌陷；

3、可以实现自适应的多栏布局；

 

<!--浏览器对块元素的渲染规则-->