CSS BFC介绍

概念：

BFC名为 "块级格式化上下文"，简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

触发BFC的常见设置：

• overflow: hidden
• display: inline-block
• position: absolute
• position: fixed
• display: table-cell
• display: flex

BFC的规则：

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
• BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
• 计算BFC的高度时，浮动元素也参与计算

BFC解决的问题：

1.Float设置元素浮动导致父盒子高度塌陷：

        可以通过让父元素触发BFC使父元素依然可以自动计算高度。

2.Margin外边距重叠：

        属于同一个BFC的两个相邻的标签外边距也会发生重叠。

        可以使俩个发生margin重叠的元素中的其中一个触发BFC，以解决俩个元素外边距塌陷的问题。

3.清除浮动：

        给元素设置浮动后，该元素拖标，会影响其后面的元素布局。

        可以使浮动的元素触发BFC，清除掉浮动对布局的影响。