BFC——块级格式化上下文

Posted 2020-08-01 yygggg

BFC(块级格式化上下文)

一、BFC是什么？

         从样式上看，具有BFC的容器和普通的容器没有区别。从功能上看，具有BFC的容器可以看作是隔离了的容器，容器里面的元素不会影响到外面的元素，并且BFC具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如overflow方法）就是触发了浮动元素的父元素BFC，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

         简单来说，BFC就是一种属性。这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

二、BFC的触发

• 浮动元素：除了属性值为none的元素。
• position:absolute/fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible(hidden/scroll/auto)
• 根元素

三、BFC的特性

3.1 BFC阻止元素外边距折叠

         两个相邻的元素margin会折叠。而当有BFC产生的时候，外边距不会叠加。

3.2 BFC 可以包含浮动的元素

         这里就是之前提到的包裹性，这也正是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性，从而可以包含浮动元素，闭合浮动。

         W3C 的原文是“‘Auto‘ heights for block formatting context roots”，也就是 BFC 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素。

3.3 BFC会阻止元素被浮动元素覆盖

3.3.1块级元素会被它的兄弟元素覆盖，触发了BFC的元素不会被它的兄弟浮动元素覆盖

3.3.2 父元素宽度不足以容纳一行中所有子元素时，非浮动子元素会下沉

四、BFC的运用

4.1 BFC实现自适应两栏布局

         运用3.3.1触发了BFC的元素不会被兄弟浮动元素覆盖，那么我们只需要让右边的div触发BFC，左边的div进行left浮动。就可以实现效果啦~

4.2 BFC清除内部浮动

         就像我们知道的一样，float属性会导致破坏，使父元素的高度“塌陷”。那我们可以利用BFC的3.2特性，是父亲元素产生BFC，这时候父亲元素的高度就会回来啦~