彻底掌握 BFC，从此面试不再惧怕 BFC 的提问！
2023-12-13 12:29:57
offer 收割机之 CSS 回顾系列——BFC 完全掌握
一、BFC 的概念
BFC，即 Block Formatting Context，中文翻译为块级格式化上下文，它是一个独立的布局环境，其中包含的内容不会影响其他内容的布局。BFC 是 CSS 中的一个重要概念，理解 BFC 可以帮助我们更好地理解和控制元素的布局。
二、BFC 的应用场景
BFC 有很多应用场景，以下列举一些常见的应用场景：
-
解决浮动元素的问题： 浮动元素会影响其他元素的布局，使用 BFC 可以将浮动元素包含在一个 BFC 中，从而防止它影响其他元素的布局。
-
清除浮动： 可以使用 BFC 来清除浮动，这样可以确保浮动元素不会影响后续元素的布局。
-
垂直居中元素： 可以通过使用 BFC 来垂直居中元素，这种方法比使用
margin: 0 auto;更可靠。 -
创建多列布局： 可以使用 BFC 来创建多列布局，这种方法比使用
float更简单、更灵活。 -
解决元素重叠问题： 可以使用 BFC 来解决元素重叠问题，这样可以确保元素不会重叠在一起。
三、BFC 的创建方法
可以使用以下方法来创建 BFC：
-
块级元素： 块级元素天生就是 BFC，比如
<div>、<p>、<h1>等。 -
浮动元素： 浮动元素也是 BFC，比如
<img>、<a>等。 -
绝对定位元素： 绝对定位元素也是 BFC，比如
<div style="position: absolute;">等。 -
flex 布局元素： flex 布局元素也是 BFC，比如
<div style="display: flex;">等。 -
grid 布局元素： grid 布局元素也是 BFC，比如
<div style="display: grid;">等。
四、BFC 的注意事项
在使用 BFC 时需要注意以下几点：
-
BFC 是一个独立的布局环境， 其中的内容不会影响其他内容的布局。
-
BFC 的高度是由其包含的元素的高度决定的。
-
BFC 的宽度是由其包含的元素的宽度决定的。
-
BFC 的边距是由其包含的元素的边距决定的。
-
BFC 的内边距是由其包含的元素的内边距决定的。
-
BFC 的外边距是由其包含的元素的外边距决定的。
-
BFC 的背景是由其包含的元素的背景决定的。
五、结语
BFC 是 CSS 中一个重要的概念，理解 BFC 可以帮助我们更好地理解和控制元素的布局。BFC 有很多应用场景，比如解决浮动元素的问题、清除浮动、垂直居中元素、创建多列布局等。在使用 BFC 时需要注意一些事项，比如 BFC 是一个独立的布局环境、BFC 的高度是由其包含的元素的高度决定的等。
