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

叁歲伎倆 2023-01-05 05:08 120阅读 0赞

### 文章目录 ###

*   *  简介
     *  1、BFC
     *   *  规则
         *  条件
         *  作用
     *  2、IFC
     *   *  规则
     *  3、块盒，行盒（行内元素），行块盒（行内块元素）的区别
     *   *  块盒元素
         *  行盒（行内元素)
         *  行块盒（行内块元素)
         *  特殊元素
     *  参考

## 简介 ##

BFC（Block Formatting Contexts），块级格式化上下文。  
IFC （Inline Formatting Contexts），行内格式化上下文。

## 1、BFC ##

![盒模型][20210112095428201.png]

### 规则 ###

> 属于同一个BFC的两个相邻Box垂直排列  
> 属于同一个BFC的两个相邻Box的margin会发生重叠  
> BFC的区域不会与float的元素区域重叠  
> 计算BFC的高度时，浮动子元素也参与计算  
> 文字层不会被浮动层覆盖，环绕于周围

### 条件 ###

> 根元素（body);  
> 浮动元素， float属性不为none;  
> 定位元素，position为absolute或fixed；  
> display为inline-block，table-cell，table-caption，flex;  
> overflow不为visible（即值为hidden/auto/scroll时）;

### 作用 ###

> 解决margin重叠问题（添加独立BFC)  
> 解决浮动高度坍塌问题（在父元素添加overflow:hidden）  
> 解决侵占浮动元素的问题（添加overflow:hidden）

## 2、IFC ##

![IFC结构][IFC]

### 规则 ###

> 在一个行内格式化上下文中，盒子是一个接一个水平放置的，从包含块的顶部开始  
> 这些盒之间的水平margin，borer和padding都有效  
> 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐

## 3、块盒，行盒（行内元素），行块盒（行内块元素）的区别 ##

### 块盒元素 ###

> display: block;  
> 常见元素：div、p、h1~h6、header、footer、nav、hr、ul、ol、dl等  
> 特点：独占一行；可以设置宽高；宽度是父元素的100%；里面可以嵌套块级元素和行内元素；

### 行盒（行内元素) ###

> display: inline;  
> 常见元素：span、a、img、br、label、strong、em、audio、video、b、i等  
> 特点：不会独占一行；不能设置宽高；宽度等于内部宽度；不允许嵌套块级元素；display为inline；a标签比较特殊可以嵌套块级元素，将a标签转换为块级元素

### 行块盒（行内块元素) ###

> display: inline-block;  
> 常见元素：input、button  
> 特点：块级元素和行内元素的结合；可以设置宽高；宽度等于内容宽度’；不会独占一行；

### 特殊元素 ###

> img元素：默认disaplay为inline；但既有块盒效果也有行和效果：可以设置宽高；不会独占一行

## 参考 ##

> https://blog.csdn.net/qq\_41996454/article/details/108903784  
> IFC(行内格式化上下文) ：https://www.jb51.cc/webfrontend/454409.html  
> 行内格式化上下文（Inline Formatiting Contexts） https://segmentfault.com/a/1190000009308818  
> 区别css，块盒，行盒（行内），行块盒（行内快）的不同：https://blog.csdn.net/dccose/article/details/105731673

[20210112095428201.png]: /images/20221119/eee5269eb7ed49629f865a9fe477ce0e.png
[IFC]: /images/20221119/d02b5e557caf41a58140ca235238f7c7.png