什么是BFC、可以解决哪些问题

妖狐艹你老母 2023-06-08 06:09 1阅读 0赞

## BFC概念： ##

**块格式化上下文**（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

## **产生BFC的方法：** ##

1.  float有值且不为空。
2.  overflow有值且不为visible。
3.  display有值为：inline-block，table-cell，flow-root，table-caption，inline-flex中的一个。
4.  position有值为absolute或者fixed。

以上条件满足任意一个即可形成BFC。

## **BFC可以解决哪些问题：** ##

**1.避免外边距折叠。**  
![外边距折叠][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70]  
通常情况下，外边距会取最大的那个值，这时要避免这个问题我们就可以利用BFC。

代码如下：

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 1]  
**2.避免文字环绕**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 2]  
解决文字环绕代码如下：

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 3]  
这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度。

**3.浮动元素不会乱跑。（包含浮动元素）**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 4]若给in添加了浮动，则会变成如下效果：  
![在这里插入图片描述][20191016182737445.jpg]如果在有浮动的情况下还要达到第一种效果，此时我们需要创建BFC，即在out上添加`overflow: hidden;`即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70]: /images/20230531/45cee935ae4648b68675bd5e37a9a381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 1]: /images/20230531/e4ae5b2c5b5d4f2baa874d05b5ecf76d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 2]: /images/20230531/2b8c956033ed4f538afa5721d1c0c9e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 3]: /images/20230531/c87cca9a09ef4766bbeb00bb96ebef7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70 4]: /images/20230531/97a5a93a46d34d179a769e8c05ab1f74.png
[20191016182737445.jpg]: /images/20230531/b3fd9b50fd9949188f1bc11ea13735a7.png