css中bfc指的是什么意思

BFC是块级格式化上下文的简称，它是CSS中一个非常重要的概念，它决定了一些元素如何在文档流中做布局、定位和渲染等方面的处理方式。

BFC是指在HTML文档中一个独立的块级容器，它内部的所有元素都会按照一定的规则进行排布。一个块级容器会包含一个或多个块级盒子，这些盒子在该容器内部按照一定的格式进行排列，同时还会遵循一些特定的规则，使得布局更加合理、更加有序。下面就来详细了解一下BFC的相关知识。

1. BFC的特性

1.1 容器内排列规则特性

容器内部的块级盒子会按照垂直方向逐个排列，在同一行的盒子会左对齐或者右对齐，并且它们之间的间隔会受到上下文的影响而发生变化。

1.2 边距合并特性

在同一个BFC容器中，邻近的两个块级盒子的上下边距会发生合并，合并后的最终边距值会取两者之中较大的值。

1.3 包含浮动特性

BFC可以包含浮动元素，使其在容器内部进行定位。当一个容器包含了浮动元素时，它会发生高度塌陷现象，这时可以通过设置BFC来防止高度塌陷。

1.4 防止文字环绕特性

当一个容器中存在浮动元素时，文字会环绕在浮动元素的周围，但是，如果这个容器设置了BFC，就可以使文字不能环绕浮动元素。

2. 如何触发BFC

2.1 根元素

HTML页面的根元素即是一个BFC容器。

2.2 浮动元素

设置元素的浮动属性为left、right时，会触发BFC。

2.3 绝对定位元素

设置元素的position属性为absolute或fixed时，会触发BFC。

2.4 inline-block元素

设置元素的display属性为inline-block时，会触发BFC。

2.5 overflow属性

当一个元素的overflow属性值不为visible时，会触发BFC。

3. BFC的应用场景

3.1 解决内部浮动元素对父级元素高度造成的覆盖问题。

当父元素和子元素都设置了浮动属性时，通常会导致子元素覆盖父元素，从而使得父元素的高度无法被指定。

这时可以通过父元素设置BFC来解决，具体做法是在父元素中设置overflow:hidden或者overflow:auto。

3.2 包含浮动元素

BFC可以包含浮动元素，从而避免浮动元素溢出的问题。

3.3 防止margin值传递

当一个元素设置了margin值时，它的margin值会传递给它的父元素，进而使其父元素的marging值发生变化。如果想要避免这种情况的发生，可以为父元素设置BFC。

3.4 防止文字环绕

当浮动元素处于容器文字的左侧或右侧，且该容器未设置BFC时，文字会环绕在浮动元素的周围。而在设置了BFC后，文字便不再会环绕浮动元素。

4. 总结

BFC是CSS中一个非常重要的概念，它可以使得元素在文档流中按照一定规律进行排布，避免一些布局问题的发生。在实际应用中，我们应该熟练掌握BFC的概念和特性及其如何触发，以及如何利用BFC来解决一些常见的布局问题。