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之外的值。