本次讲解CSS中的一个重要概念，BFC。BFC是BlockFormattingContext的缩写，中文翻译为BlockFormattingContext。这是什么意思？在学习CSSmargins的时候，我们曾经讲过一个margincollapse问题：当相邻块元素和嵌套块元素的垂直margin相邻时，margin会合并，最后的margin等于margin最大的那个价值。那。事实上，浏览器如何解决边距合并的规则是由W3C制定的。翻看W3C的官网，我们看到了这样一段话，里面描述了一种叫做blockformatcontext的规则，我们简称为BFC。如果某个元素触发了BFC规则，我们也可以将其称为BFC区域。根据规则的描述，我们知道一个BFC区和另一个BFC区是相互独立的，不会互相影响。也就是说，如果容器内部的子元素有上边距和下边距，那么边距不会跑到外面去影响其他元素，而是拉开里面的距离。这使得父元素成为一个单独的区域。BFC规则还有一个很重要的特点就是如果元素被BFC规则触发，浏览器在计算元素高度时也会将浮动元素考虑在内。这样，无论你有多少个浮动元素，你都不用担心父元素的高度。从这点来看，BFC还是给我们带来了很多好处。那么如何触发元素的BFC规则呢？其实有很多方法，比如给元素加上float；为元素添加绝对定位；将元素的类型更改为内联块；改变元素的溢出样式，只要值不等于默认值就可以。在这些方法中，最常用的是溢出属性。无论是浮动、定位还是改变元素类型，都可能极大地影响页面布局，而overflow属性则没有这样的问题。还记得我们是如何学习如何消除浮动效果的吗？现在你应该明白为什么我在解决父元素高度塌陷的时候写了overflow:hidden了。本文配套教程链接：https://www.bilibili.com/video...
