BFC是什么？有什么作用

一丶 BFC——块级格式上下文

1 BFC定义

• BFC指的是块级格式化上下文，是Web页面中一个独立的渲染区域，具有一系列的渲染规则。
• BFC决定了元素如何布局及与其他元素之间的关系。

2 BFC的创建方式

• 根元素（HTML）
• float属性不为none
• overflow属性不为visible
• display属性为inline-block、table-cell、table-caption、flex、inline-flex之一
• position属性为absolute或fixed

3 BFC的特性

• 内部的元素在垂直方向上一个接一个地放置。
• BFC区域不会与浮动元素重叠。
• BFC区域计算高度时会包括浮动元素。
• BFC的边界会阻止上下边距的重叠。
• BFC可以包含浮动的子元素，并且不会发生高度塌陷。

4 BFC的应用

• 解决浮动元素引起的父元素高度塌陷问题。
• 阻止外边距重叠。
• 创建自适应多栏布局。
• 创建包含浮动元素的容器。

5 触发BFC的技巧

• 使用overflow: hidden;或其他非visible值。
• 使用float属性浮动元素。
• 使用display: inline-block;或其他特定的display值。
• 使用position: absolute;或position: fixed;定位元素。