什么是BFC,BFC的使用

什么是BFC

BFC是块级格式化环境

BFC是CSS中隐藏的一个属性，当给某个元素设置指定属性时，可以开启元素的BFC

开启BFC后的特点：（可以使用开启BFC解决以下问题）

1.不会被浮动元素覆盖

2.子元素和父元素的外边距不会重叠

3.可以包含浮动的子元素

如何开启BFC

通过以下方式开启元素的BFC

float 的值不是 none
position 的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow 的值不是 visible

BFC的使用范围

1.当将子元素浮动导致父元素高度塌陷时
2.当子元素与父元素边距重叠时
3.当一个元素浮动后，下一个元素会自动往上排，导致浮动的元素覆盖了下面的元素时

最优方法

使用伪元素和clear：both 可以同时解决高度塌陷和外边距重叠的问题
因为大部分开启BFC的属性都会有副作用，和不足的地方，使用以下方式可以完美解决

.box3::after,
 .box3::before {
            content: '';
            display: table;
            clear: both;
        }