BFC 用来拯救 float 布局的浮夸和野蛮

浮动布局虽已逐渐落幕，但由于其独特的适应性，至今仍有一席之地。其存在的相关问题也不断受到挑战，而BFC则是一名挑大梁的好手。

BFC，全称Block Formatting Context，也就是块级格式化上下文，它是一个容纳块级元素的容器，它决定了这些块级元素如何排列和定位。BFC具有以下特性：

• BFC内的块级元素从上到下垂直排列，不受浮动元素的影响。
• BFC内的块级元素的高度不会因浮动元素而塌陷。
• BFC内的浮动元素不会影响BFC的高度。

BFC的特性可以解决浮动元素带来的很多问题，比如：

• 浮动元素与非浮动元素的重叠问题。
• 浮动元素与父元素高度塌陷问题。
• 浮动元素与相邻块级元素的间距问题。

如何创建BFC？
要想使用BFC，需要先创建一个BFC。创建BFC的方法有很多，比如：

• 给元素设置float属性（左浮动或右浮动）。
• 给元素设置display属性为block、inline-block或table-cell。
• 给元素设置overflow属性为hidden、scroll或auto。

只要元素满足以上条件之一，就会创建一个新的BFC。

BFC与浮动布局

BFC和浮动布局有着密切的关系。BFC可以用来解决浮动元素带来的很多问题，但它并不能取代浮动布局。浮动布局仍然是解决某些布局问题的最佳选择。

BFC和浮动布局的区别

BFC和浮动布局的主要区别在于：

• BFC是一个容器，而浮动元素是一个元素。
• BFC影响块级元素的排列和定位，而浮动元素影响行内元素的排列和定位。
• BFC可以解决浮动元素带来的很多问题，但它不能取代浮动布局。

当我们需要解决浮动元素带来的问题时，可以使用BFC来进行解决。但是，如果我们需要实现一些特殊的效果，比如文本环绕图片，就需要使用浮动布局来实现。

BFC与Flex布局

BFC与Flex布局也是一对好搭档。Flex布局是一种新的布局方式，它可以实现更加灵活的布局。Flex布局的优点有很多，比如：

• 可以实现一维或二维的布局。
• 可以控制元素的排列顺序。
• 可以控制元素的尺寸和间距。

BFC和Flex布局可以结合使用来实现更加复杂的布局。BFC可以用来解决Flex布局带来的某些问题，比如：

• Flex布局中的元素可能会超出父元素的边界。
• Flex布局中的元素可能会与其他元素重叠。

通过使用BFC，我们可以防止Flex布局中的元素超出父元素的边界或与其他元素重叠。

总体来说，BFC是一个非常有用的CSS概念，它可以用来解决浮动元素带来的很多问题，提升布局效果。BFC与浮动布局和Flex布局也可以很好地结合使用，实现更加复杂的布局。