B F C

BFC是什么

BFC，即块级格式化上下文（Block Formatting Context），是CSS中的一个概念。它是指一个独立的渲染区域，其中的元素按照一定的规则进行布局和渲染。

BFC的作用

BFC的主要作用是控制元素在布局上的行为，包括外边距的塌陷、浮动元素对周围元素的影响以及清除浮动等。

• 外边距折叠：在BFC中，垂直方向上的相邻元素的外边距会发生折叠（合并）现象，从而避免了不必要的间距。但在同一个BFC的元素中，父子元素之间的外边距不会发生折叠。
• 清除浮动：BFC可以包裹浮动元素，使其不对其他元素造成影响。通过创建一个新的BFC，可以清除浮动带来的高度塌陷问题。
• 阻止浮动元素重叠：在BFC中，浮动元素会受到BFC边界的限制，从而阻止其与其他元素的重叠。这有助于解决一些浮动布局导致的错位或溢出问题。
• 自适应两栏布局：BFC可以使用浮动或者overflow: hidden;等方式创建，结合盒模型和清除浮动，可以实现一些常见的布局需求，如自适应两栏布局。

创建BFC的方法

• 给元素添加 float 属性。
• 给元素添加 display: inline-block;、display: table-cell;、display: table-caption; 等属性。
• 给元素添加 overflow 属性为除 visible、clip 之外的值。