对 BFC 的理解

什么是BFC？

BFC 即块级格式上下文。
BFC是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC具有一些特性？

• 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
• 在 BFC 中上下相邻的两个容器的 margin 会重叠，创建新的BFC 可以避免外边距重叠。
• 计算 BFC 的高度时，需要计算浮动元素的高度。
• BFC 区域不会与浮动的容器发生重叠。
• BFC是独立的容器，容器内部元素不会影响外部元素。
• 每个元素的左 margin 值和容器的左 border 相接触。

BFC的作用？

• 可以是实现三栏（或者两栏）自适应布局。
• 可以避免margin重叠问题。
• 可以避免高度塌陷。

创建BFC的方式？

• 绝对定位元素（position 为 absolute 或 fixed ）。
• 行内块元素，即 display 为 inline-block 。
• overflow 的值不为 visible 。

满足下列条件之一就可以触发BFC？

• 根元素，即html
• float的值不为none（默认）
• overflow的值不为visible（默认）
• display的值为table-cell, table-caption, inline-block, flex, 或者inline-flex 中的其中一个
• position的值为absolute或fixed